Как сделать jQuery .stop() работать для переключения анимаций

Question

Я только что сделал демоверсию моего проекта. Я настоятельно рекомендую вам проверить мой JSFiddle и посмотреть, что именно происходит.

Я также разместил здесь код.

HTML:

<div ng-app="slideApp" ng-controller="slideCtrl"> 
    <input type="button" value="Slide Down" ng-click="toggleSlide()"> 
    <br> 
    <div style="display:none" slide-toggle> 
     <a class="slide hide-slide" href="#">Slide Up</a> 
    </div> 
</div> 

AngularJs:

var app = angular.module("slideApp", []); 

app.controller("slideCtrl", function($scope, $timeout) { 
    $scope.slide = false; 
    $scope.toggleSlide = function() { 
     $scope.slide = true; 
    } 
}); 

app.directive("slideToggle", function() { 
    return { 
     restrict: "A", 
     link: function(scope, element) { 
      scope.$watch("slide", function(newVal) { 
       if (newVal) { 
        $(element).slideDown().delay(2000).slideUp(); 
       } 
       scope.slide = false; 
      }) 

      $(element).find(".hide-slide").on("click", function() { 
       $(element).stop(true, true).slideUp(); 
      }) 
     } 
    } 
}) 

Моя проблема заключается в том:

Когда "скользят вниз" нажата, панель будет скользить вниз и последний в течение 2-х секунд до него автоматически переместится вверх.

Теперь сделайте следующее: 1. повторно нажмите «Сдвиньте вниз», чтобы отобразить панель, а затем нажмите «Сдвинуть вверх», чтобы скрыть панель; 2. После выполнения вышеизложенного несколько раз нажмите «Слайд вниз» (не нажимайте «Slide Up» на этот раз), вы увидите, что панель скользит вниз и быстро продвигается вверх, в то время как панель должна скользить после 2 секунд задержки.

Я знаю, почему это не работает (jQuery .Stop() documentation).

Если более чем один метод анимации называется на тот же элемент, что позже анимации помещаются в очереди эффектов для элемента. Эти анимации не начинаются до тех пор, пока не завершится первая. Когда вызывается .stop(), следующая анимация в очереди начинается немедленно.

Но есть ли у кого-нибудь решение, которое делает всплытие панели после 2-секундной задержки? Я очень ценю это, если у вас есть решение, чтобы оно работало и обновляло мой JSFiddle. Спасибо!

Answer 1

Там две проблемы здесь. Во-первых, многократное нажатие slideDown вызывает создание очереди. Исправить легко, добавьте в него .stop (true, true). Это будет держать его открытым дольше, если вы несколько раз нажмите слайд вниз, а затем закройте 2 секунды после последнего нажатия. (@TedWhitehead показал это в своем ответе)

$(element).stop(true,true).slideDown().delay(2000).slideUp(); 

Далее, при нажатии кнопки slideUp, вам не нужно, чтобы очистить очередь, так как в конце очереди вы собираетесь задвиньте его в любом случае. Вместо этого просто перейдите к концу текущей анимации (которая будет задержка) и не сдвиньте ее обратно.

$(element).stop(false,true); 

Он просто заканчивает задержку и продолжает следующую вещь в очереди - slideUp. https://jsfiddle.net/yxdqtm79/42/

Answer 2

Я думаю, вам просто нужно добавить еще stop() в строке 16:

$(element).stop(true, true).slideDown().delay(2000).slideUp(); 

Updated JSFiddle