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

How to create a sliding animation on menu hover with jQuery?

提问by user1461645

I've seen this on plenty of websites but I'm not sure if I'll be able to explain it.

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

Sometimes there are sliding elements in navigation, just like arrow under menu items that is sliding when user hovers over different menu links etc.

有时导航中有滑动元素，就像菜单项下的箭头在用户悬停在不同菜单链接上时滑动一样。

Here's a simple menu:

这是一个简单的菜单：

<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>   

And some jQuery (I know I'll be able to get the same effect with simple css :hover):

还有一些 jQuery（我知道我可以通过简单的 css :hover 获得相同的效果）：

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

Also, working jsfiddle:

另外，工作jsfiddle：

http://jsfiddle.net/8EvhK/

http://jsfiddle.net/8EvhK/

Buttons background becomes red on hover. I want this background to slide and transform (width) between these buttons as I hover.

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

How to do something like that? I've been looking for tutorials, but no luck.

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

Thanks a lot!

非常感谢！

回答by danijar

1. Add an element to the menu using jquery's append.

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

2. On hoverof any menu item, animatethis new element to the horizontal positionand widthof the menu item which fired the event.

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

3. Reset the slider to its initially state.

   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. Add some CSS.

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

1. 使用 jquery 的append.

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

2. 在hover任何菜单项上，animate这个新元素与触发事件的菜单项的水平position和width。

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

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

   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;
   }
   

Here is a working fiddle: http://jsfiddle.net/5wPQa/2/

这是一个工作小提琴：http: //jsfiddle.net/5wPQa/2/

回答by MaJac89

You can achieve this effect with CSS transitions:

您可以使用CSS 过渡实现此效果：

ul li {
? ??display:block;
? ??padding: 5px 15px;
? ??background-color: #333;
? ??color: #fff;
? ??text-decoration: none;
? ??width:50%;
? ??-moz-transition: width 1s; /* Firefox 4 */
? ??-webkit-transition: width 1s; /* Safari and Chrome */
? ??-o-transition: width 1s; /* Opera */
}

ul li:hover{
? ??width:100%;
}

Here is an example.

这是一个例子。