javascript - Jquery 无法返回动画菜单列表上的事件状态

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()

使用背景位置动画