JQuery와 애니메이션 각 목록 항목

Question

나는이 목록을 가지고 있고 기본적으로, 각 목록 항목을 통해 애니메이션을 위쪽으로 몇 센티미터를 이동 각 항목의 연쇄 효과를 갖고 싶어.

나는 이것을 달성하기 위해이 코드를 만들었지 만, 그것은 개별 목록 항목보다는 전체 목록을 통해 움직이는 것처럼 보입니다.

JS -

$("#energy_guide ul").animate({"top" : "+=20px"}, "fast"); 

JQuery와 및

<ul class="guide-block-list us-list" id="energy_guide"> 
    <li> 
     <a href="#">Item 1</a> 
    </li> 

    <li> 
     <a href="#">Item 2</a> 
    </li> 
</ul> 

너희들 수행 HTML 내가 이것을 달성 할 수있는 방법에 관한 조언을?

감사

Answer 1

이 코드는 당신이 원하는 것을 할 것입니다.

var delay_time = 0; 
$("#energy_guide ul li").each(function() { 
    $(this).delay(delay_time).animate({"top" : "+=20px"}, "fast"); 
    delay_time += 200; 
}); 

각각은 li을 반복합니다. 첫 번째 li은 지연 0, 두 번째 지연 200 밀리 초, 세 번째 지연 400 밀리 초 등이 있습니다. 그래서 서로 다른 시간에 서로 다른 순간에 그들을 움직입니다. 지연 시간을 자유롭게 변경하고 더 빠르게/더 느리게하려면 200에서 다른 것으로 변경하십시오.