Question

I’m trying to make a clever contact page. I’ve got my jQuery animations all working correctly, the only thing left is that I want to prevent animations from queueing up a bunch when you roll over the links quickly.

Typically, I know you can use .stop() to prevent that, but I’m not sure how to do it in this scenario. So:

1. How do I prevent jquery animations from queueing up multiple times on mouse-over?
2. If anyone wants to provide insight on how to clean up my messy jQuery, that would be a bonus.

Working code: jsFiddle (mouse over the button links)

Answer 1

This seemed to work for me on a dropdown menu:

.stop(true, true)

In context, in my code:

$('#smoothmenu1 li').hover(function () {
    $(this).addClass('hover');
    $(this).children('ul').stop(true, true).fadeIn(300);
}, function () {
    $(this).removeClass('hover');
    $(this).children('ul').stop(true, true).fadeOut(200);
});