come prevenire il concatenamento degli eventi in javascript

Question

Ho 4 icone che, al passaggio del mouse, far scorrere un div usando jquery animate.

Il problema è quando mi passa il mouse su tutte le quattro icone in modo rapido, avanti e indietro, le funzioni di librazione sono concatenati insieme e anche al passaggio del mouse fuori, le animazioni di scorrimento ancora correre fino a quando tutto il mouse sopra gli eventi che si sono verificati, sono stati completati.

Voglio farlo in modo che al passaggio del mouse, tutti gli eventi in attesa di esecuzione vengano annullati!

fonte trovate qui sotto:

<div id="sidebar-slider-nav"> 
    <div class="testimonials" onmouseover="sidebar_slider(0)"><img src="images/icons/testimonialsIcon.png"/></div> 
    <div class="facebook" onmouseover="sidebar_slider(280)"><img src="images/icons/facebookIcon.png"/></div> 
    <div class="twitter" onmouseover="sidebar_slider(560)"><img src="images/icons/twitterIcon.png"/></div> 
    <div class="news" onmouseover="sidebar_slider(840)"><img src="images/icons/blogIcon.png"/></div> 
    <div class="clear"></div> 
</div> 

e la funzione che si chiama è:

function sidebar_slider(val){ 
    $('#sidebar-slider').animate({scrollLeft:val},500) 
} 

Qualcuno sa di un modo migliore per fare questo?

per un esempio del mio problema, passare a http://a3mediauk.co.uk e guardare la barra laterale! Thankyou

Answer 1

$('#sidebar-slider').stop(); 

Cancella qualsiasi animazione esistente sull'elemento. Puoi anche incatenarlo nel codice esistente:

$('#sidebar-slider').stop().animate({scrollLeft:val},500)