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

Gabriele Petrioli · Answer 1 · 2011-07-31T22:39:00.833

3

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/

edited Jul 31 '11 at 22:39

answered Jul 31 '11 at 22:32

Gabriele Petrioli

191,379
34
261
317

This is a very good example of the effect in Jquery, although it doesn't seem to hide the last image before showing the next? Unless I'm mistaken – Declan Cook Jul 31 '11 at 22:35
@Decad, the OP did not ask for any hiding .. just showing with a delay between each one.. – Gabriele Petrioli Jul 31 '11 at 22:38
Really elegant answer, great call on the 5000*index. – Loktar Jul 31 '11 at 22:43

score 2 · Answer 2 · answered Jul 31 '11 at 22:42

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;
        }
    });
}

score 1 · Answer 3 · answered Jul 31 '11 at 22:33

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/

score 0 · Answer 4 · answered Jul 31 '11 at 22:41

0

jQuery.delay()

For example:

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

answered Jul 31 '11 at 22:41

Mattis

5,026
3
34
51

load div then delay load next in jquery

4 Answers4

Linked