如何使用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/

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

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

非常感谢！

- user1461645

---

顺便提一下，大多数情况下你可以使用 $ 代替 jQuery。例如：$("a").removeClass("active"); - ACarter

顺便说一下，像你的例子这样的悬停效果应该始终使用CSS而不是Javascript来完成。 - danijar

Answer 1

1. 使用 jQuery 的 append 将一个元素添加到菜单中。

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

当鼠标悬停在任何菜单项上时，将此新元素动画化到触发事件的菜单项的水平位置和宽度。

$('ul li a').hover(function(){

    var left = $(this).parent().position().left;
    var width = $(this).width();

    $('#slider').stop().animate({
        'left' : left,
        'width' : width
    });
});

将滑块重置为初始状态。

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

添加一些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/。

- danijar

---

修复： http://jsfiddle.net/5wPQa/1/ 由于边框宽度为1px，您需要向左添加1px。 - Puyol

@Puyol：发现得真准！我用CSS编辑了我的答案，提供了另一个修复版本。 - danijar

随时都可以。您可以将jQuery事件“hover”更改为“mouseenter”，以获得更好的性能，因为“hover”也会在鼠标离开元素时触发，这在这里并不必要。但是这并不重要，因为此脚本与性能无关。 - danijar

Answer 2

您可以使用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%;
}

这里是一个例子。

- MaJac89