使用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/）上，当您单击文本框，然后移动文本框移动和按钮本身。 请告诉我，可能是什么问题..

P.S。抱歉我的英语不好。

Answer 1

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

jQuery的animate（）将元素转换为块。这是另一个问题，其中包含替代动画的答案：Animating inline elements with jQuery

Answer 2

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

#s { display: inline!important;}

Answer 3

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