cómo evitar el encadenamiento de eventos en javascript

Question

Tengo 4 iconos que, al pasar el mouse, desplazar un div usando jquery animate.

El problema es que cuando sobrevivo los cuatro iconos rápidamente, las funciones de desplazamiento se encadenan juntas e incluso en el mouse, las animaciones de desplazamiento siguen ejecutándose hasta que todo el mouse pasa.

Quiero que salga, todos los eventos que esperan ser ejecutados, ¡se cancelan!

fuente hallazgo a continuación:

<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> 

y la función que se llama es:

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

¿Alguien sabe de una mejor manera de hacer esto?

para ver un ejemplo de mi problema, navegue hasta http://a3mediauk.co.uk y mire la barra lateral. Gracias

Answer 1

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

Va a borrar cualquier animación existente en el elemento. También puede encadenar esto en su código existente:

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