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

Posted

技术标签:

【中文标题】如何使用 jQuery 在菜单悬停时创建滑动动画?【英文标题】:How to create a sliding animation on menu hover with jQuery? 【发布时间】:2012-06-19 16:35:18 【问题描述】:

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

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

这是一个简单的菜单:

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

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

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

非常感谢!

【问题讨论】:

顺便说一句,大多数时候你可以使用$而不是jQuery。 IE。 $("a").removeClass("active"); 顺便说一下,像您的示例这样的悬停效果应该始终使用 CSS 而不是 javascript 【参考方案1】:

    使用 jquery 的 append 向菜单添加一个元素。

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

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

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

    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/

【讨论】:

修复:jsfiddle.net/5wPQa/1因为边框有1px的宽度,需要向左加1px @Puyol:很好看!我用另一个通过 CSS 修复它的版本编辑了我的答案。 随时。您可以将 jquery 事件 hover 更改为 mouseenter 以获得更好的性能,因为如果鼠标离开此处不需要的元素,hover 也会触发。但这没关系,因为此脚本与性能无关。【参考方案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 在菜单悬停时创建滑动动画?的主要内容,如果未能解决你的问题,请参考以下文章

如何播放反向关键帧动画以悬停?

动画悬停和活动类问题 - jQuery

悬停时的Jquery动画子菜单不流畅

jQuery:悬停链接时在div中动画(淡化)背景颜色或图像?

快速悬停时jQuery animate()序列乱序

jquery悬停动画高度(切换)