jQuery가 .each() 루프의 각 항목에 효과를 적용하려면 어떻게 완료해야합니까?

Question

나는 다음과 같은 목록이 있습니다

<div id="test">test</div> 

<ul> 
    <li>foo</li> 
    <li>bar</li> 
    <li>sta</li> 
    <li>cko</li> 
</ul> 

다음과 같은 jQuery 코드 : 논리적

$(document).ready(function() { 
    $('li').each(function(index) { 
     $('#test').text($(this).text()); 
     $('#test').show("drop", { direction: "down" }, 500, function() { 
      $("#test").delay(1000).hide("puff", {}, 100); 
     }); 
    }); 
}); 

, 이것은 드롭 퍼프 효과를 적용, testfoo에 DIV의 내용을 변경해야합니다을 변경 내용을 bar으로 변경하고 효과를 적용하는 식으로 진행합니다. 그러나 당신이 그것을 실행할 때, 전체 루프는 효과가 시작되기 전에 끝나기 때문에 마지막 요소 인 cko이 먼저 나타나서 4 회 애니메이션을 얻습니다.

어떻게하면 각 항목이 효과를 얻고 다음 항목으로 이동할 수 있습니까?

Answer 1

당신은 당신이 (.queue() 사용), 큐의 순서로 발생하려면 다음과 같이뿐만 아니라 큐의 첫 번째 기능을 추가해야합니다

$(function() { 
    $('li').each(function(index) { 
     var li = $(this); 
     $('#test').queue(function(n) { 
      $(this).text(li.text());   //set the text 
      n();        //call next function in the queue 
     }).show("drop", { direction: "down" }, 500, function() { 
      $(this).delay(1000).hide("puff", {}, 100); 
     }); 
    }); 
});​ 

You can give it a try here. 이렇게하면 텍스트 설정이 애니메이션과 함께 순서대로 대기하게됩니다. 대기열 콜백으로 전달 된 함수를 호출하는 것이 중요합니다. 이는 대기열을 발전시켜이 경우 뒤 따르는 애니메이션을 실행하기 때문입니다.

.delay(), 당신은 큐에 원하는 경우에 당신이뿐만 아니라 그것을 가지고 방법 이상한 영향을 미칠 것 같이 그것을 :

$(function() { 
    $('li').each(function(index) { 
     var li = $(this); 
     $('#test').queue(function(n) { 
      $(this).text(li.text()); 
      n(); 
     }).show("drop", { direction: "down" }, 500) 
      .delay(1000).hide("puff", {}, 100); 
    }); 
});​ 

You can try it here, 이것은 실제로 각 요소에 대해 두 번째를 일시 중지 계속 전진해라.

Answer 2

는 테스트,하지만 난 당신이 시도 할 수 있다고 생각하지 :

$(document).ready(function() { 
    animateItem($('li'), 0); 
}); 

function animateItem(li, i) { 
    if (li.length > i) { 
     $('#test').text(li.eq(i).text()); 
     $('#test').show("drop", { direction: "down" }, 500, function() { 
      $("#test").delay(1000).hide("puff", {}, 100, function() { 
       animateItem(li, i++); 
      }); 
     }); 
    } 
}