jquery - 带有 ul/li 的 jQuery 动画搜索框

Question

你能教我如何模仿http://societeperrier.com/这样的导航栏吗？我尝试了很多方法，但都是徒劳的。我使用 http://thefinishedbox.com/freebies/scripts/jquery-animated-search/作为我的搜索框。当我把它和我的 ul/li 导航栏放在一起时。它为后滑动效果预先留下空白。正如你在法国巴黎银行看到的那样。单击搜索框后，li 项目将自动重新排列。

对不起，我的英语很差，感谢您的帮助。

Answer 1

这是我的做法，这里是jsfiddle。

$("#search").focus(function(){

    // animate right 100px, you can change the values after
    $(this).animate({'width' : "200px" }, 200);

});

$("#search").blur(function(){

   // change back after blur is fired
   $(this).animate({'width' : "100px" }, 200);

});

​</p>

Answer 2

我使用了相同的 jQuery 插件并遇到了类似的问题。为了解决这个问题，我从 css 中删除了字段集的宽度，并在 js 文件中的“焦点”事件上应用了宽度。添加的代码如下：

$('#searchForm fieldset').animate({width: '240px'}, 300);

在“模糊”事件中，我们还需要重新调整父元素的大小。所以我在模糊事件中添加了以下行：

$('#searchForm fieldset').animate({width: '152px'}, 300);

您可以设置您选择的宽度。我不确定它是否完美，但它对我有用。