how to prevent event chaining in javascript

Question

I have 4 icons that, on mouse over, scroll a div using jquery animate.

The problem is when I hover over all four icons quickly, back and forth, the hover functions are chained together and even on mouse out, the scroll animations still run until all the mouse over events that happened, are completed.

I want to make it so on mouse out, all the events that are waiting to be executed, are cancelled!

find source below:

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

and the function that is called is:

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

does anybody know of a better way to do this?

for an example of my problem, please navigate to http://a3mediauk.co.uk and look at the sidebar! Thankyou

Answer 1

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

Will clear any existing animation on the element. You can also chain this into your existing code:

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