CODEWITHSUNDEEP
javascriptjquery
Fane
Fane

Reputation: 2074

Fading divs one by one

I want to hide and show divs, one by one to #id using something similar to this code:

$.each(divs, function(index,value){
    $("#id").append(divs[index]).hide().show();
});

The problem with this is that the divs are appended all at the same time (which is not what I pretend). How exactly can this be done?

Upvotes: 0

Views: 71

Answers (2)

ZEE
ZEE

Reputation: 5849

try this : 

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

try to put your div's which you want to show them one by one into a div with the id parent , and the other one's with class .child , this will work fine

LIVE DEMO

Upvotes: 0

SeinopSys
SeinopSys

Reputation: 8937

Use .delay(). i*500 is going to add a 500ms delay to each item. To fade them, use .fadeIn() instead of .show().

$.each(divs, function(i,element){
    $("#id").append($(element).hide().delay(i*500).fadeIn());
});

Demo:

var divs = $('#hidden > div');
$.each(divs, function(i,element){
    $("#id").append($(element).hide().delay(i*500).fadeIn());
});
#hidden { display: none }
#id > div {
  width: 15px;
  height: 15px;
  margin: 0 5px 5px 0;
  padding: 10px;
}
#id > div:nth-child(even) {
  background-color: #efefef;
}
#id > div:nth-child(odd) {
  background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hidden">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
</div>
<div id="id"></div>

Upvotes: 2

Related Questions