jquery - 调整字段大小并在单击外部重新调整大小

Question

我是 jquery 新手，我有点无法解决这个问题。所以我有一个搜索框(.search)，我想在单击它时调整其大小。这确实有效，搜索字段变得“更大”。但是，当我在搜索字段之外单击时，我希望它再次增长。我尝试用“body”点击方法来实现。但它不起作用。

这是我的代码:

$(function() {
$('.search').click(function() {
    $('.search').css('width', '450px');
});});

另一个问题:如何将此更改与动画结合起来？

Answer 1

$('.search').focus(function() {
     $('.search').css('width', '450px');
});
$('.search').blur(function() {
     $('.search').css('width', 'auto');
});

如果你想为宽度变化设置动画，你可以这样做:

$('.search').focus(function() {
     $('.search').animate({width: '450px'});
});
$('.search').blur(function() {
     $('.search').animate({width: '150px'});
});

否则，如果您希望为另一个对象设置动画，您可以这样做:

$('.search').focus(function() {
     $('.search').css('width', '450px');
     $('#id_to_animate').animate({width: '200px'});
});
$('.search').blur(function() {
     $('.search').css('width', '150px');
     $('#id_to_animate').animate({width: '100px'});
});