Iterating over child elements one at a time

as the title states, I am trying to iterate over a collection of child elements, the trouble comes in when I try to fade them out one at开发者_运维百科 a time, I am using $.each() to try and achieve this, but it seems to be fading everything out at once, what I would like it to do is wait for the animation to finish and then go to the next child element and fade that out, here is my 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, would it be possible to trigger an animation before the current one has finished, but delaying it by a set interval?

Thanks in advance!

Here's a slightly different approach:

Create an array of all the children elements, as opposed to your initial code which used a jQuery object.

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

Create a function that pops one element at a time out of the array and animate it, recursively calling itself as a callback function so it will execute only AFTER the previous animation is finished.

function fadeThemOut(children) {
    if (children.length > 0) {
        var currentChild = children.shift();
        $(currentChild).fadeOut("slow", function() {
            fadeThemOut(children);
        });
    }
}

See a working demo on jsFiddle.

Hope this helps !

Do you want to fade one by one after the previous finish fading?

See this example on jsFiddle

el.fadeOut("slow", function() {
    // Fade next (see example)
});

Reference for fadeOut

.fadeOut( [ duration ], [ callback ] )
- duration: A string or number determining how long the animation will run.
- callback: A function to call once the animation is complete.

Add an increasing delay for each subsequent fade:

var children = $("container").children();

var delayInterval = 0;
children.each(function(){
    if (delayInterval > 0) $(this).delay(delayInterval);
    $(this).fadeOut('slow');
    delayInterval += 300;
})

You will probably need to adjust the delay increment to fit to your needs.

I think you'll want to use something like $.queue so you're not manually coming up with durations and timing all of your animation yourself. jQuery's $.queue documentation linked to this question on Stack Overflow which should point you in the right direction.

Giv for your DIV's own ID's and than you can itterate over the ID's and fading one at a time out. For example:

var children = $("container").children().each(function() {

for(var k=0;k< $(this).attr('id').length;k++) {
$(this).attr('id',$(this).attr('id')); }

$(this).attr('id').fadeOut('slow'); });