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

使用jquery的append将元素添加到菜单中。
```
$('ul').append('<div id="slider"></div>');
```

在任何菜单项的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
    });
});

将滑块重置为初始状态。

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

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

Answer 2

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

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

如何使用jQuery在菜单上创建滑动动画？

2 个答案: