jquery - увеличить интервал таймаута с каждой итерацией .each()

Question

Я хочу вызвать анимацию в списке элементов и немного увеличить итерацию в задержке. У меня есть то, что я сделал до сих пор здесь:

JS Fiddle

var timer = 1000; 

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

Там нет никаких ошибок, и это технически работает, но все они анимировать одновременно. Я знаю, что это очень похоже (практически идентично), similar code, но по какой-то причине он не работает. Что мне не хватает?

Answer 1

Вы можете использовать индексный параметр для увеличения анимации по мере продвижения.

Кроме того, вы ориентируетесь все элементы внутри цикла, использовать второй параметр вместо, который является элементом в настоящее время итерации

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

FIDDLE

JQuery также имеет метод delay() , которые могут быть использованы для анимации

$('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>