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!

beeglebug · Accepted Answer · 2011-11-30 09:23:17Z

6

$('#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)

answered Nov 30, 2011 at 9:23

beeglebug

3,5421 gold badge25 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to prevent event chaining in JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related