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

Question

我希望当您单击文本框时它的大小已扩大。这是这个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/）上，当您单击文本框时，文本框会移动，按钮本身也会移动。请告诉我，可能是什么问题..

PS对不起我的英语不好。

Answer 1

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

jQuery 的 animate() 将元素转换为块。这是另一个问题，其中包含替代动画的答案：使用 jQuery 制作内联元素动画

Answer 2

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

#s { display: inline!important;}

Answer 3

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