Question

我有一个菜单列表，可以在鼠标悬停时为背景位置设置动画，这样就可以了。当backgroundPosition：0时，菜单项处于活动状态。但是，当用户没有将鼠标悬停在其他列表项上时，我希望列表中的第一项返回活动状态。

这就是我到目前为止，动作动画效果正在起作用，但我不知道如何让第一个项目恢复活跃状态。

的jQuery

$(function() {
    //Edited...
    //services menu background effect 
    var timer;
    function invocation() {
        timer = setTimeout(function() {
            $('#services li:first a').stop().animate({
                backgroundPosition: 0
            }, 500);
        }, 300);
    }
    $('li.menu a').each(function() {
        $(this).css({
            backgroundPosition: -416
        });
        $(this).mouseover(function() {
            $(this).stop().animate({
                backgroundPosition: 0
            }, 500)
            if ($(this).attr('id') != 's_active') {
                $('#services li:first a').stop().animate({
                    backgroundPosition: -416
                }, 500);
            }
            clearTimeout(timer);
        }).mouseout(function() {
            hover = false;
            $(this).stop().animate({
                backgroundPosition: -416
            }, 500)
            invocation();
        });
    });
    $('#services li:first a').css({
        backgroundPosition: 0
    }, 500);
    //invocation();
});

HTML

<div id="services">
    <h1>Services</h1>
    <ul>
        <li id="s_active" class="menu"><a href="#">Semi / Intensive courses</a> </li>
        <li class="menu"><a href="#">Pass plus / Motorway tuition</a></li>
        <li class="menu"><a href="#">Block bookings</a></li>
        <li class="menu"><a href="#">Mock theory and Mock practical tests</a></li>
    </ul>
</div>

Answer 1

以下是我将如何做jsFiddle

只需更换

即可

 doBackgroundEffect()

使用backgroundPosition动画

Jquery无法在动画菜单列表上返回活动状态

1 个答案: