Синхронные анимации в jQuery, не использующие обратные вызовы?

Question

Я не могу использовать обратные вызовы, потому что у меня есть такой сценарий (псевдокод):

$('.box').on('click', function() {
    $('.expanded-box').animate({
        // shrink it
    });

    $(this).animate({
        // grow it
        $(this).addClass('expanded-box');
    });
});

Я не могу поместить анимацию расширения в обратный вызов для expanded-box анимации роста, потому что это не всегда может происходить. Но мне нужна вторая анимация, чтобы дождаться завершения предыдущей. Как я могу это сделать?

Answer 1

Начиная с jQuery 1.6, вы можете использовать promise () , чтобы получить Promise объект , который будет разрешен после завершения всех анимаций на данном элементе.Кроме того, в документации сказано:

Использование .promise () в коллекции без активной анимации возвращает разрешенное Обещание.

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

$('.box').on('click', function() {
    var $this = $(this);
    $('.expanded-box').animate({
        // shrink it
    }).promise().done(function() {
        $this.animate({
            // grow it
        }).addClass('expanded-box');
    });
});

Answer 2

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

$('.box').on('click', function() {
    var $this = $(this),
        $exp = $(".expanded-box");

    function grow() {
       $this.animate({
           width: "200px", height: "100px"
       }).addClass('expanded-box');
    }

    if ($exp.length > 0) {
       $exp.animate({
           width: "100px", height: "50px"
       }, grow).removeClass("expanded-box");
    } else {
       grow();
    }        
});​

Демо: http://jsfiddle.net/PXddm/