Jquery unable to return to active state on animated menu list
<p>I have a menu list that animates the background position on mouseover and this is working. When backgroundPosition: 0 the menu item is active.  But I want the first item in the list to return to being active when the user is not hovering over the other list items.</p>

<p>This is what I have so far, The movesover animated effect is working but Im not sure how to get the first item to return to being active state.</p>

<p><strong>jQuery</strong></p>

<pre><code>$(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();
});​  
</code></pre>

<p><strong>HTML</strong></p>

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