Как заблокировать действия JQuery во время выполнения предыдущего действия

Question

У меня есть div на странице, который скользит вверх при наведении, а затем обратно при наведении.Если бы вам пришлось тогда парить на предмете и выходить из него, тогда все действия будут поставлены в очередь и, таким образом, сработают, заставляя объект продолжать скользить вверх и вниз, даже если вы больше не взаимодействуете с ним.

Выможно увидеть это в действии на сайте, который я разрабатываю здесь .Просто наведите указатель мыши на большое изображение в центре, чтобы увидеть появившийся информационный элемент.

В идеале должно получиться так, что во время анимации дальнейшие действия не должны ставиться в очередь.

Вотмой текущий код:

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

Создать глобальную переменную.Когда начинается анимация.Очистите его, когда он завершится.Установите условие для выхода из функции, если эта переменная установлена ​​перед вызовом анимации.

Answer 2

$(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;
             });      
          }
       }
    );
});

// это заставит ваш код работать правильно ...

Answer 3

Вероятно, это не лучшее решение, но если вы запустите stop(true, true) до анимации, оно должно работать.

Демонстрационная версия: http://jsfiddle.net/TetVm/