load div then delay load next in jquery

Question

Hi I have a gallery which has left floated divs in, the pictures are the backgrounds for each div, what i want is for each picture to load with a slight delay so first will load then wait say 5 seconds then the 2nd etc in a sequence, i have seen it on sites but keep forgetting to bookmark it, if possible in jquery.

i did try query but i can only get the whole lot to fadein when i want each div to fade in

so with this code:

<div id="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

the child elements will fade in one at a time. the first then a delay of 5 seconds and then the next and so on.

thanks

Answer 1

You can use

$('#parent .child')
    .hide()
    .each(function(index){
        var _this = this;
        setTimeout( function(){ $(_this).fadeIn(); }, 5000*index );
    });

demo at http://jsfiddle.net/gaby/eGWx9/1/

Answer 2

I like @Gaby aka G. Petrioli answer the best, but Ill post mine anyway.

Live Demo

CSS

.child{display:none;}

JS

showElements($('#parent'));

function showElements(element){
    element.children('div').each(function(){
        if($(this).is(':hidden')){
            $(this).fadeIn();
            setTimeout(function(){showElements(element)}, 1000);  
            return false;
        }
    });
}

Answer 3

First set all your children to hidden .child {display:none;}

Then fade them in recursively:

function fade_in(e){
    $(e).fadeIn('slow',function(){
        if($(e).next().length > 0){
            setTimeout(function(){fade_in($(e).next());},5000);
        }
    });
}
fade_in($('.child:first-child'));

http://jsfiddle.net/B7Qgk/1/

Answer 4

jQuery.delay()

For example:

<script>
    $("button").click(function() {
      $("div.first").slideUp(300).delay(800).fadeIn(400);
      $("div.second").slideUp(300).fadeIn(400);
    });
</script>