jQuery: prevent mouseover/mouseout/hover triggered events queueing up with .stop()
Consider the following code for a rollover-triggered animation using jQuery:
$(".roll").mouseover(function(){ $(this).animate({width:"+=200px"}); }); $(".roll").mouseout(function(){ $(this).animate({width:"-=200px"}); });
If the content in question is rolled over several times, the animations queue up and continue to play long after the cursor has moved on... prevent this happening by using .stop()
$(".roll").mouseover(function(){ $(this).stop(true, false).animate({width:"+=200px"}); }); $(".roll").mouseout(function(){ $(this).stop(true, false).animate({width:"-=200px"}); });
There are many more variations of .stop() other than 'true, false', so read more about jQuery's .stop() function here. (also have a peek at jQuery's .clearQueue() function here.