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

Question

I have the following method:

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

I'd like to defer an action until .each() has entirely completed. Assume this is some version of deferred/promise I need to employ, but not understanding how in this scenario it would work.

Answer 1

this can be done with done function

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

OR

when function called do it there

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

     // do things here 
    });

Answer 2

You can use the promise object returned by animation

 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

Do not use done with animation promises, as if any are in the target state to begin with it will not fire. Use always() instead

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