JQUERY: установка активного состояния на вкладках анимированного меню

Question

У меня есть спрайты изображений, которые используют JQuery для установки позиции BG при событиях mouseover и mouseout. Когда я устанавливаю позицию BG в активном состоянии с помощью JQUERY, она работает нормально, пока я не отведу курсор от активной «вкладки», которая затем запускает анимацию события mouseout.

То, что я хочу, это событие mouseClick, чтобы остановить анимацию на активной вкладке, но при этом позволить анимационному эффекту работать на других вкладках, а также при нажатии другой вкладки для удаления активного состояния с текущей вкладки до новая «активная» вкладка.

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>

Вы можете увидеть, что у меня так далеко здесь

Заранее спасибо за любую помощь

Answer 1

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