Jquery animate on background position not working
<p>Can anybody tell me why this jquery isnt working?</p>

<p>I have a list like so:</p>

<pre><code>      &lt;div id="services"&gt;
            &lt;h1&gt;Services&lt;/h1&gt;
            &lt;ul&gt;
                &lt;li class="menu"&gt;&lt;a href="#"&gt;menu item1&lt;/a&gt;&lt;/li&gt;
                &lt;li class="menu"&gt;&lt;a href="#"&gt;menu item2&lt;/a&gt;&lt;/li&gt;
                &lt;li class="menu"&gt;&lt;a href="#"&gt;menu item3&lt;/a&gt;&lt;/li&gt;
                &lt;li class="menu"&gt;&lt;a href="#"&gt;menu item4&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
</code></pre>

<p>And I want to slide in the background image from the left on hover and reverse it on mouseout.</p>

<p>The following jquery code isnt doing anything on moueover or mouseout. What am I missing here?</p>

<pre><code>$(function(){       
    $('li.menu a').css( {backgroundPosition: "-416px 0"})
    .mouseover(function(){
        $(this).stop().animate({backgroundPosition:"(0px 0px)"}, 500)
    })
    .mouseout(function(){
        $(this).stop().animate({backgroundPosition:"(-416px 0)"}, 500)
    });
});
</code></pre>
