How to block jQuery actions during a previous action

Question

I have a div on the page that slides up on hover and then comes back down. If you then hovered and turned off an element, then all actions will be queued and, thus, will be called, as a result of which the object will move up and down, even if you no longer interact with it.

You can see it in action on the site I'm developing here . Just hover over the large image in the center to display the information div.

Ideally, what should happen is that during the animation, further actions should not 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.
            });
       }
    );
});

Thanks in advance!

Answer 1

. . , . , ​​ .

Answer 2

, , , stop(true, true) , .

: http://jsfiddle.net/TetVm/

Answer 3

$(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 ...