調整大小字段並調整回外部點擊

Question

我是jquery的新手，我有點不解決這個問題。所以我有一個搜索框（.search），當它被點擊時我想調整其大小。這確實奏效，searchfield得到「更大」。但是，當我在搜索字段外單擊時，我希望它再次成長。我嘗試用「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'}); 
}); 

Answer 2

您可以使用jQuery的模糊事件來調整要素背下來就失去焦點後：

http://api.jquery.com/blur