Question

I have a a div in a page that slides up on hover, and then back down on hover out. If you were then to hover in and out on the item, then all the actions will be queued and thus triggered, causing the object to keep sliding up and down even though you are no longer interacting with it.

You can see this in action on the site I am developing here. Simply hover over the large image in the center to see the information div to appear.

Ideally what should happen is that while an animation is taking place no further actions should be queued.

Here is my current code:

$(document).ready(function(){
    $(".view-front-page-hero").hover(
       function() {
            $hero_hover = true;
            $('.view-front-page-hero .views-field-title').slideDown('slow', function() {
                // Animation complete.
            });
       },
       function() {
            $hero_hover = false;
            $('.view-front-page-hero .views-field-title').slideUp('slow', function() {
                // Animation complete.
            });
       }
    );
});

Answer 1

Create a global variable. When the animation starts. Clear it when it completes. Set a condition to exit the function if this variable is set before calling the animation.