CODEWITHSUNDEEP
javascriptjqueryhtmlcss
swapnesh
swapnesh

Reputation: 26732

Load div one by one with a delay using jquery

This is my whole code..what I am trying to do is to have-. when DOM is ready first div shows on page and second one after a delay and then third one and so on up to 150.

Problem with the current code is that, whole 150 div loads at once after a small delay.

My code -

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test for dashed div</title>
<style type="text/css">
.dashdiv
{
    width: 150px;
    height: 50px;
    background: #ae2d3e;
    float:left;
    box-shadow: 10px 10px 6px #d4a7b0;
    margin: 5px;
}
</style>
</head>
<body>
    <?php
    for($i =0; $i < 150; $i++)
    {
    ?>
    <div class="dashdiv">
    This is a div text
    </div>
    <?php   
    }
    ?>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('div.dashdiv').each(function()
    {
          $(this).hide().delay(1000).fadeIn(1850);
    });
});
</script>   
</body>
</html>

Upvotes: 1

Views: 12100

Answers (4)

wes
wes

Reputation: 734

The problem you're facing, which no one has mentioned, is that jQuery delay() is only chainable on an fx queue. So, using it after hide() will not work. A quick fix to get it working would be to use an effect in place of hide(), ie: 

$('div.dashdiv').each(function(i) {
  $(this).fadeOut(0).delay(1000*i).fadeIn(1850);
});

Upvotes: 8

louisbros
louisbros

Reputation: 875

Here's a way to delay and fadeIn a div only once the previous div has finished. It uses the fadeIn callback to move to the next div in the array:

// hide all
$('.dashdiv').hide();

// fade in each div one by one
divs = document.getElementsByClassName('dashdiv');
(function fade(i){
    if(i < divs.length){
        $(divs[i]).delay(1000).fadeIn(1850, function(){
            fade(++i);
        });
    }
})(0);

Or without getElementsByClassName.

// hide all
$('.dashdiv').hide();

// fade in each div one by one
(function fade(i){
    if(i < $('.dashdiv').length){
        $($('.dashdiv')[i]).delay(1000).fadeIn(1850, function(){
            fade(++i);
        });
    }
})(0);

Demo: http://jsfiddle.net/louisbros/RdxS6/

Upvotes: 0

Boaz
Boaz

Reputation: 20220

Try using the index argument that is automatically assigned for every iteration of each to extend the delay in a linear manner:

$('div.dashdiv').each(function(i) {
   $(this).delay(1000*i).fadeIn(1850);
});

Also, following your comment, the style of the div elements should be changed to make them hidden:

.dashdiv {
    display:none;
    ...
}

Upvotes: 5

Zaheer Ahmed
Zaheer Ahmed

Reputation: 28548

You can use :

Html:

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

jQuery:

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

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

Upvotes: 2

Related Questions