Question

如何使用jQuery或CSS3而不是Java Script，使用流畅的动画扩展搜索框的大小。

我希望当用户点击它时，框的大小设置为动画为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/

Answer 2

CSS（3） - 只有解决方案。没有Javascript - 所以没有jQuery;）

#searchbox input,
#searchbox input:hover{
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

#searchbox input:hover{
  width: 200px;
}

#searchbox input{
  width: 150px;
}

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

Answer 3

要使用此功能，您需要jQuery（javascript）。

以下是您想要的JsFiddle：http://jsfiddle.net/7CDRA/2/

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

Javascript：

 $("#q").click(function(){
   $(this).animate({width:"300px"},400); 
 });

Answer 4

我也喜欢编辑文本框的高度。 Here is a jFiddle example

$('input[type="text"]').focus(function() {
    $(this).animate({
        width: $(this).width()*2.5,
        height: $(this).height()*1.5
    });
    var newFontSize = parseInt($(this).css("font-size"));
    newFontSize = newFontSize * 1.5;
    $(this).css({
        'font-size': newFontSize
    });
});

$('input[type="text"]').blur(function() {
    $(this).animate({
        width: $(this).width()/2.5,
        height: $(this).height()/1.5
    });
    var newFontSize = parseInt($(this).css("font-size"));
    newFontSize = newFontSize / 1.5;
    $(this).css({
        'font-size': newFontSize
    });
});

使用jQuery放大搜索框

4 个答案: