jquery - Iterating over child elements one at a time -

as title states, trying iterate on collection of child elements, trouble comes in when try fade them out 1 @ time, using $.each() try , achieve this, seems fading out @ once, wait animation finish , go next child element , fade out, here code,

jquery:

var children = $("container").children();  children.each(function(){     $(this).fadeout('slow'); }) 

html:

<div id="container">     <div style="background: #f00;"></div>     <div style="background: #00f;"></div>     <div style="background: #0f0;"></div> </div> 

also, possible trigger animation before current 1 has finished, delaying set interval?

thanks in advance!

here's different approach:

create array of children elements, opposed initial code used jquery object.

var children = []; $("#container").children().each(function() {     children.push(this); }); 

create function pops 1 element @ time out of array , animate it, recursively calling callback function execute after previous animation finished.

function fadethemout(children) {     if (children.length > 0) {         var currentchild = children.shift();         $(currentchild).fadeout("slow", function() {             fadethemout(children);         });     } } 

see working demo on jsfiddle.

hope helps !