JQuery - Отключить Нажмите, пока все связанные анимации не будут завершены

Вопрос

Нижеприведенное решение предназначено для перемещения вниз по groupDiv, отображающего div1, и достаточно места для div2 для вставки. Все это достигается путем цепочки анимации в элементе # Link.Click().

Кажется, что ошибка, но при быстрой ссылке . Есть ли способ предотвратить это? Возможно, отключив функцию Click до тех пор, пока анимация цепочка не будет завершена? В настоящее время у меня есть чеки, но они, похоже, не выполняют эту работу: (

Вот код, который я использую:

Пользовательские функции анимации.

//Slide up or down and fade in or out
jQuery.fn.fadeThenSlideToggle = function(speed, easing, callback) {
    if (this.is(":hidden")) {
        visibilityCheck("show", counter--);
        return this.slideDown({duration: 500, easing: "easeInOutCirc"}).animate({opacity: 1},700, "easeInOutCirc", callback);
    } else {
        visibilityCheck("hide", counter++);
        return this.fadeTo(450, 0, "easeInOutCirc").slideUp({duration: 500, easing: "easeInOutCirc", complete: callback});
    }
};

//Slide off page, or into overflow so it appears hidden.
jQuery.fn.slideLeftToggle = function(speed, easing, callback) {
    if (this.css('marginLeft') == "-595px") {
        return this.animate({marginLeft: "0"}, speed, easing, callback);
    } else {
        return this.animate({marginLeft: "-595px"}, speed, easing, callback);
    }
};

В dom готово, у меня есть это:

$('#Link').toggle(
    function() {
        if (!$("#div2 .tab").is(':animated')) {
            $("#GroupDiv").fadeThenSlideToggle(700, "easeInOutCirc", function() {$('#div2 .tab').slideLeftToggle();});
        }
    },
    function(){
        if (!$("#groupDiv").is(':animated')) {
            $('#div2 .tab').slideLeftToggle(function() {$("#groupDiv").fadeThenSlideToggle(700, "easeInOutCirc", callback);} );
        }
    }
);

Структура HTML такова:

<div id="groupDiv">
     <div id="div1">
          <div class="tab"></div>
     </div>
     <div id="div2">
          <div class="tab"></div>
     </div>
</div>

Ответ 1

Проблема заключается в вашем первом анимировании div # GroupDiv, поэтому ваша первоначальная проверка if (!$("#div2 .tab").is(':animated')) будет ложной до тех пор, пока groupDiv не закончит анимировать и не будет вызван обратный вызов.

Возможно, вы можете попробовать

if (!$("#div2 .tab").is(':animated') && !$("#GroupDiv").is(':animated'))

однако я сомневаюсь, что это покроет действительно быстрый щелчок. Самым безопасным является отменить событие, используя

$(this).unbind('toggle').unbind('click');

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

Ответ 2

Вы можете легко отключить свои ссылки во время работы анимации

$('a').click(function () {
    if ($(':animated').length) {
        return false;
    }
});

Вы можете, конечно, заменить селектор $('a'), чтобы он соответствовал только некоторым ссылкам.

Ответ 3

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

Синтаксис: jQuery (селектор).stop(clearQueue, gotoEnd)//оба параметра являются логическими
Дополнительная информация

Когда я нажимаю кнопку, я сначала останавливаю анимацию и очищаю очередь, затем я начинаю определять новую анимацию. gotoEnd может оставаться ложным (значение по умолчанию), но вы можете попробовать изменить его на true, если хотите, вам может понравиться результат.

Пример использования: jQuery ('button # clickMe'). stop (true).animate({left: + = 10}).

Ответ 4

вы можете перенести это первое в событие click

    $(element).css({ "pointer-events":"none"});

, и это в функции обратного вызова анимации

    $(element).css({ "pointer-events":"auto"});

Ответ 5

вы можете отвязать... но это тоже должно работать:

if (!$("#div2 .tab").is(':animated') && !$("#GroupDiv").is(':animated')) return;

Ответ 6

Недавно я создал плагин AJAX jQuery с большим количеством анимации. Обходной путь к ошибке анимации AJAX, которую я нашел, выглядит следующим образом.

    $(options.linkSelector).click(function(e){
    if ($("#yourNav").hasClass("disabled")) {
      return false;
    } else {
      e.preventDefault();
      $("#yourNav").addClass("disabled")
      // Prepare DOM for new content
      $(content).attr('id', 'content-old');
      $('<div/>', {id: 'ajMultiLeft'}).css({'top': '100%'}).insertAfter('#content-old');

      // Load new content
      $(content).load(linkSrc+ ' ' +options.content+ ' > *', function() {

      // Remove old content

      $(content).animate({top: '100%'}, 1000, function(){
        $(content-old).remove(); 
        $("#yourNav").removeClass("disabled")
      });

      setBase();
    }

Это означает, что событие click для каждой ссылки не реагирует ни на что, в то время как родительский div имеет класс отключен. Класс disabled устанавливается функцией при первоначальном щелчке и удаляется с помощью обратного вызова в финальной анимации.