jQuery를 애니메이션이 실행되지 않는 별도

Question

나는 다음과 같은 내용이 있습니다

<div id="content"> 
    <div class="update">1.</div> 
    <div class="update">2.</div> 
    <div class="update">3.</div> 
    <div class="update">4.</div> 
</div> 

내가이 content DIV 내부 update 클래스와 모든 div를 애니메이션을 적용 할를. 나는 이런 식으로 애니메이션을 만들었습니다 :

$('#content div.update').each(function(){ 
    $(this).animate({ 
     'margin-top': '10px', 
     'opacity': 1 
    }, 300); 
}); 

애니메이션이 한꺼번에 작동한다는 것을 발견했습니다. 나는 queue 기능을 찾아 보았지만 그것은 나에게 아무런 상식을 짓지 않습니다. 블로그 기사를 찾았지만 복잡해졌습니다. 누군가가 나에게 어떻게 적절하게 대기열에 두어 모든 예제를 제공하여 div.update 하나씩 움직이게 할 수 있습니까?

Answer 1

시도 :

See jsFiddle

$('#content div.update').each(function(i){ 
    $(this).delay(i*300).animate({ 
     'margin-top': '10px', 
     'opacity': 1 
    }, 300); 
});