CODEWITHSUNDEEP
javascriptjquery
user2632411
user2632411

Reputation: 13

How can i make the array show one at a time with a delay?

each div shows up as a block and I want them to start showing when the page is ready

<div id="blocks">


</div>

enter code here

var mainArray = new Array();

mainArray[0] = "<div class='tile'> </div>"
mainArray[1] = "<div class='tile'> </div>"
mainArray[2] = "<div class='tile'> </div>"
         //adds to #blocks
for (var i = 0; i < mainArray[i].length; i++) {
$('#blocks').append(mainArray[i])
};

Upvotes: 1

Views: 52

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388406

Try using setTimeout()

var mainArray = new Array();

mainArray[0] = "<div class='tile'>1</div>"
mainArray[1] = "<div class='tile'>2</div>"
mainArray[2] = "<div class='tile'>3</div>"
//adds to #blocks
for (var i = 0; i < mainArray.length; i++) {
    (function(idx){
        setTimeout(function(){
            $(mainArray[idx]).hide().appendTo('#blocks').fadeIn()
        }, idx * 2000)
    })(i)
};

Demo: Fiddle

Upvotes: 1

Related Questions