Question

我有以下方法：

function animatePortfolio(fadeElement) {
    fadeElement.children('article').each(function(index) {
        $(this).delay(1000*index).fadeIn(900);
    });
}

我想推迟行动，直到.each()完全完成。假设这是我需要使用的延迟/承诺的某个版本，但不了解在这种情况下它将如何工作。

Answer 1

可以使用done函数

完成此操作

function animatePortfolio(fadeElement) {
   fadeElement.children('article').each(function(index) {
      $(this).delay(1000*index).fadeIn(900);
  }).promise().done(function(){
     // do aditional animation here 
   });
 }

或者

当函数调用时执行

    animatePortfolio(fadeElement).promise().done(function(){

     // do things here 
    });

Answer 2

您可以使用动画返回的promise对象

function animatePortfolio(fadeElement) {
  fadeElement.children('article').each(function(index) {
    $(this).delay(1000 * index).fadeIn(900);
  }).promise().done(function() {
    fadeElement.css('color', 'red')
  });
}


animatePortfolio($('div'))

article {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
</div>

Answer 3

不要将done与动画承诺一起使用，就像任何处于目标状态的动作一样，它不会触发。请改用always()

function animatePortfolio(fadeElement) {
   fadeElement.children('article').each(function(index) {
      $(this).delay(1000*index).fadeIn(900);
  }).promise().always(function(){
     // do aditional animation here 
   });
 }

将操作推迟到.each（）完成

3 个答案:

或者