Синхронная анимация в 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 object, что будет разрешена, когда все анимации на заданном элементе будут завершены. Кроме того, в документации указано:

Использование .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/