Question

请教我如何模仿像http://societeperrier.com/这样的导航栏？我尝试了很多方法但是徒劳无功。我正在使用http://thefinishedbox.com/freebies/scripts/jquery-animated-search/作为搜索框。而当我把它与我的ul / li导航栏。它为后滑效应留下了空白。正如您在Societe Perrier中看到的那样。点击搜索框后，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);

});

Answer 2

我使用了相同的jQuery插件并遇到了类似的问题。为了解决这个问题，我从css中删除了fieldset的宽度，并在js文件中的'focus'事件中应用了宽度。添加的代码如下：

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

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

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

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

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

2 个答案: