使用 jQuery 在搜索框中输入动画文本答案

【问题标题】：Animated text input in search box with jQuery使用 jQuery 在搜索框中输入动画文本
【发布时间】：2013-07-12 14:37:22
【问题描述】：

我希望当您单击文本框时它的大小已扩大。这是http://jsfiddle.net/62CDp/的解决方案

这个 jQuery 代码：

$(function() {
    $("#s").focus(function(){
        $(this).animate({ width:"250px"}, 'slow');
    }).blur(function(){
        $(this).animate({ width:"151px"}, 'slow');
    });
});

一切似乎都很好，但在我的网站 (http://iamlex.ru/bookmarks/) 上，当您单击文本框时，随后文本框移动，按钮本身移动。请告诉我，可能是什么问题..

附：对不起我的英语不好。

【问题讨论】：

这是分配给搜索框和按钮的宽度问题。

标签： jquery

【解决方案1】：

您的输入正在从 display:inline 切换到 display:block，然后又返回。 display:block 将按钮放到下一行，容器增长，所以提交按钮移动。然后它切换回内联并按预期呈现。

jQuery 的 animate() 将元素转换为块。这是另一个关于替代动画的问题：Animating inline elements with jQuery

【讨论】：

现在一切都清楚了，但我决定只更改显示的值以及如何使事情正常工作。

【解决方案2】：

向#s 元素添加CSS 以强制显示内联。这将解决问题：

#s { display: inline!important;}

【讨论】：

【解决方案3】：

如果您想要简单的解决方案，只需用 <div style="float: left;"> 包装两个输入即可。这样它应该可以工作。

【讨论】：