jquery - Zeitüberschreitungsintervall mit jeder Iteration von .each() erhöhen

Question

Ich möchte eine Animation auf einer Liste von Elementen auslösen und jede Iteration die Verzögerung ein wenig erhöhen. Ich habe, was ich bisher hier gemacht habe:

JS Fiddle

var timer = 1000; 

$('div').each(function(){ 
     setTimeout(function(){ 
      $('div').animate({ 
       width:200, 
       height:200, 
       opacity:1 
      }, 1000); 
     }, timer); 
     timer += 1000; 
}); 

Es gibt keine Fehler und es funktioniert technisch, aber sie alle zugleich animieren. Ich weiß, dass es sehr ähnlich ist (similar code), aber aus irgendeinem Grund funktioniert es nicht. Was vermisse ich?

Answer 1

Sie können den Indexparameter verwenden, um die Animation während der Fahrt zu erhöhen.

Auch sind Sie alle die Elemente innerhalb der Schleife Targeting, den zweiten Parameter verwenden statt, die das Element zur Zeit iteriert

$('div').each(function(i, elem){ 
    setTimeout(function(){ 
     $(elem).animate({ 
       width:200, 
       height:200, 
       opacity:1 
     }, 1000); 
    }, 1000 * i); 
}); 

FIDDLE

jQuery auch eine Methode hat delay() das kann für Animationen

$('div').each(function(i, elem){ 
 
    $(elem).delay(i * 1000).animate({ 
 
     width : 200, 
 
     height : 200, 
 
     opacity : 1 
 
    }, 1000); 
 
});

div { 
 
    width:0; 
 
    height:0; 
 
    opacity:0; 
 
    display:block; 
 
    margin:0 auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="background:#f00;"></div> 
 
<div style="background:#000;"></div> 
 
<div style="background:#ccc;"></div>

verwendet werden