jquery - 使用 jQuery 放大搜索框

Question

如何使用 jQuery 或 CSS3(而不是 Java 脚本)通过流畅的动画来扩展搜索框的大小。

这是我的搜索框:http://jsfiddle.net/7CDRA/

我希望当用户单击它时，框的大小动画为 50，目前为 20。

<form id="searchbox" method="get" action="http://www.google.com">
    <input type="text" name="q" size="20"><input type="submit" value="search">
</form>

Answer 1

使用 jquery animate 是最简单的:

$('input[type="text"]').focus(function() {
    $(this).animate({
        width: $(this).width()*2.5
    });
});

$('input[type="text"]').blur(function() {
    if(this.value == '') {
        $(this).animate({
            width: $(this).width()/2.5
        });
    }
});

http://jsfiddle.net/7CDRA/4/

这是一个更无错误的示例，但具有静态宽度值: http://jsfiddle.net/7CDRA/6/