JQUERY: Setting Active state on animated menu tabs

Question

I have image sprites that use JQuery to set the BG position on mouseover and mouseout events. When I set the active state BG position using JQUERY it works fine until I move my cursor away from the active 'tab' which then fires the mouseout event animation.

What I want is the mouseClick event to stop the animation on the active tab but still allow the animation effect to work on the other tabs, and when another tab is clicked for the active state to be removed from the current tab to the new 'active' tab.

JQuery

$(function(){

 /* This script changes main nav links hover state*/

$('.navigation a')
 .css( {backgroundPosition: "-1px -120px"} )
 .mouseover(function(){
 $(this).stop().animate({backgroundPosition:"(-1px -240px)"}, {duration:400})
      })


 .mouseout(function(){
   $(this).stop().animate({backgroundPosition:"(-1px -120px)"}, {duration:400, complete:function (){
    $(this).css({backgroundPosition: "-1px -120px"})

   }})


  })

});

$(document).ready(function(){
$("a").click(function(){ 
$(this).css({backgroundPosition: "-1px -235px"});                                    

}); 
});

HTML

<ul class="navigation">

<li><a href="#index" tabindex="10" title="Home" id="homeButton"></a></li>
<li><a href="#about" tabindex="20" title="About us"  id="aboutButton"></a></li>
<li><a href="#facilities" tabindex="30" title="Our facilities and opening Times"  id="facilitiesButton"></a></li>
<li><a href="#advice" tabindex="40" title="Advice and useful links" c id="adviceButton"></a></li>
<li><a href="#find" tabindex="50" title="How to find Us"  id="findButton"></a></li>
<li><a href="#contact" tabindex="60" title="Get in touch with us" id="contactButton"></a></li>

</ul>

You can see what I've got so far here

Thanks in advance for any help

Answer 1

$("ul li").click(function(){
  $("ul li.active").removeClass('active');  
  $(this).stop().addClass('active');
})