jQuery 2 анимации одна за другой

Question

jQuery 2 анимации одна за другой

0

Скажем, у меня есть две кнопки анимации на странице. Пользователь нажимает на первую анимацию и оживляет ее. У меня есть так, что анимация открывается, и она остается там, пока пользователь не нажмет на другое место на странице. Но когда пользователь нажимает на другую кнопку триггера анимации, пока другая анимация все еще встает, все закручивается, и обе анимации идут в одно и то же время :( Итак, как бы отложить другую анимацию до завершения анимации закрытия анимации? Jsfiddle: http://jsfiddle.net/hBb9L/17/

$("#e").click(function (e) {
    //done
    $("#re").animate({
        "margin-top": "104px"
    }, 800);
    $("#ret").animate({
        "margin-top": "104px"
    }, 800);
    $(".popu").animate({
        "margin-top": "-102px"
    }, 800);
    $("#s").show(200);
    e.stopPropagation();

eric2872 16 апр. 2014, в 02:10

Источник

Теги:

jquery

1 ответ

Ещё вопросы

3piece · Accepted Answer · 2014-04-18T17-11-00.000Z

У Jquery есть анимированный класс, который вы могли бы использовать.

Для вашего случая вы можете обернуть коллекцию анимаций внутри каждого триггера/кнопки внутри оператора if, проверяющего "is: animated":

if($("#re").is(':not(:animated)') && $("#ret").is(':not(:animated)')) {
   .....
   .....
}

Есть и другие ответы на переполнение стека : анимированные и : not (: анимированные).

Этот подход несколько громоздкий, другим решением было бы создать логическую переменную вместо анимированной проверки: затем установить ее во время анимации:

 $(document).ready(function () {
     var inProgress = false;
     $("#s").hide(0);

 $("#e").click(function (e) {
    if(!inProgress) {
        inProgress = true;
        .....
    $("#s").show(200, function() {
           // inProgress = false;
        });
    }
  });
  ....

});

Для полноты я включил Обновленный скрипт для вас с использованием обоих методов. Я также поменял курсор на вас, нависая над каждой плиткой.

Я бы рекомендовал проверить jquery stop(), который останавливает любую анимацию, выполняемую в данный момент для этого элемента, и queue(), с которой вы также можете адаптировать решение.