How to block JQuery actions while a previous action is still taking place

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() {
     开发者_如何学Python       $hero_hover = false;
            $('.view-front-page-hero .views-field-title').slideUp('slow', function() {
                // Animation complete.
            });
       }
    );
});

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.

This is probably not the best solution, but if you run stop(true, true) before the animation, it should work.

Live demo: http://jsfiddle.net/TetVm/

$(document).ready(function(){
var continue=true;
    $(".view-front-page-hero").hover(
       function() {
         if(continue){
            $('.view-front-page-hero .views-field-title').slideDown('slow', function() {
                continue=false;
            });
          }
       },
       function() {
         if(continue!){
            $('.view-front-page-hero .views-field-title').slideUp('slow', function() {
                continue=true;
             });      
          }
       }
    );
});

//this will make your code work correctly...