8

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

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

这是一个简单的菜单:

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

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

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

非常感谢!

4

2 回答 2

15
  1. 使用 jquery 的append.

    $('ul').append('<div id="slider"></div>');
    
  2. hover任何菜单项上,animate这个新元素到水平方向positionwidth触发事件的菜单项。

    $('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;
    }
    

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

于 2012-06-17T10:03:08.537 回答
-1

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

这是一个例子

于 2012-06-17T10:11:56.163 回答