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

Posted 2023-05-08

【中文标题】使用 jQuery 在搜索框中输入动画文本

【英文标题】：Animated text input in search box with 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/) 上，当您单击文本框时，随后文本框移动，按钮本身移动。 请告诉我，可能是什么问题..

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

【问题讨论】：

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

【参考方案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;"> 包装两个输入即可。这样它应该可以工作。