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

我有一个菜单列表，可以在鼠标上方设置背景位置的动画，这很有效。当backgroundPosition:0时，菜单项处于活动状态。但我希望列表中的第一项在用户不悬停在其他列表项上时恢复为活动状态

这就是我到目前为止所做的，movesover动画效果正在发挥作用，但我不知道如何让第一个项目恢复到活动状态

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>

服务

以下是我的做法

只要换个新的

 doBackgroundEffect()

---

使用backgroundPosition动画

你能给我们一个工作的JSFIDLE来处理它吗：）给你，但是背景图像没有明显的动画效果，因为我无法将背景图像添加到a标记中。看起来你的.mouseout（）和.mouseleave（）正在为谁来制作背景位置而斗争。我终于让它像上面一样工作了，但肯定有更有效的方法。