javascript - 如何使用 jQuery 在菜单悬停时创建滑动动画？

Question

我在很多网站上看到过这个，但我不确定我是否能够解释它。

有时导航中会有滑动元素，例如菜单项下的箭头，当用户将鼠标悬停在不同的菜单链接上时会滑动等。

这是一个简单的菜单:

<ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link number 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link something 4</a></li>
    <li><a href="#">Link 5</a></li>
</ul>   

还有一些 jQuery(我知道我可以用简单的 css 获得同样的效果 :hover):

jQuery('ul li a').hover(function() {
    jQuery('a').removeClass('active');
    jQuery(this).addClass('active');
});

此外，工作 jsfiddle:

http://jsfiddle.net/8EvhK/

悬停时按钮背景变为红色。我希望这个背景在我悬停时在这些按钮之间滑动和变换(宽度)。

如何做这样的事情？我一直在寻找教程，但没有找到。

非常感谢!

Answer 1

1. 使用 jquery 的 append 将元素添加到菜单。

   $('ul').append('<div id="slider"></div>');
   

2. 在任何菜单项的悬停上，动画这个新元素到水平位置和宽度 触发事件的菜单项。

   $('ul li a').hover(function(){
   
       var left = $(this).parent().position().left;
       var width = $(this).width();
   
       $('#slider').stop().animate({
           'left' : left,
           'width' : width
       });
   });
   

3. 将 slider 重置为其初始状态。

   var left = $('ul li:first-child a').parent().position().left;
   var width = $('ul li:first-child a').width();
   $('#slider').css({'left' : left, 'width' : width});
   

4. 添加一些 CSS。

   #slider {
       position:absolute;
       top: -5px;
       left: 0;
       height: 100%;
       width: 0;
       padding: 5px 15px;
       background-color: #f00;
       z-index:-1;
   }
   

这是一个有效的 fiddle :http://jsfiddle.net/5wPQa/2/