javascript - How do I get jQuery to apply an effect to each item in an .each() loop before it finishes? -

i have following list:

<div id="test">test</div>  <ul>     <li>foo</li>     <li>bar</li>     <li>sta</li>     <li>cko</li> </ul> 

and following jquery code:

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

logically, should change contents of div test foo, apply drop , puff effect, change contents bar, apply effect, , on. when run it, entire .each loop finishes before effects started, last element cko shows first , gets animated 4 times.

how can make each item effect , move on next one?

you need add first function on queue if want happen in order of queue, (using .queue()), this:

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

you can give try here. queues text setting happen in sequence animations, seems you're after. calling function passed your queue callback important, it's advances queue, firing animation follows in case.

the .delay() have weird effect way have well, if want on queue, this:

$(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 here, pause second each element before moving on.