jquery mouseover,mouseout and click
<p>I have a sprite menu and I am using jquery for the mouseover, mouseout and click. The mouseover and mouseout work fine but I want is if I click and selected a menu then change the background position. It is now my problem, it doesn't work, maybe because once I click a menu then the mouseout still triggered. </p>

<p>here is my jquery</p>

<pre><code>$(document).ready(function(){
    $(function(){
        $('#a a')
            .css( {backgroundPosition: "0 -33px"} )
            .mouseover(function(){
                $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
            })
            .mouseout(function(){
                $(this).stop().animate({backgroundPosition:"(0 -33px)"}, {duration:200, complete:function(){
                    $(this).css({backgroundPosition: "0 -33px"})
                }})
            })
    });
});
</code></pre>

<p>my css</p>

<pre><code>h2  {clear:both;padding-top:20px;}
ul {list-style:none;margin:0;padding:0;}
li {float:left;width:120px;margin:0;padding:0;text-align:center;}
li a {display:block;padding:5px 10px;height:100%;color:#FFF;text-decoration:none;}
li a:hover, li a:focus {background-position:0 0;}
li a:active {background-position:-66px 0;}
#a a {background:url(&lt;?php echo base_url() ?&gt;images/tabs.png) repeat 0 -33px;}
</code></pre>

<p>my html</p>

<pre><code>&lt;h2&gt;Top down&lt;/h2&gt;
    &lt;ul id="a"&gt;
        &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;        
    &lt;/ul&gt;
</code></pre>
