fadeIn some div one by one using jquery

Question

I have 8 div . I want that when the page gets ready , each div fade into the page and after that the next one .... I tried this but all the div fade into the page together. What should I do for that? Thanks

 <div class="parts" id="div1">
        <img src="images/home_title.png" alt="" />
 </div>
 <div class="parts" id="div2">
       <img src="images/call_title.png" alt="" width="150px" height="40px" />
 </div>
 <div class="parts" id="div3">
       <img src="images/about_title.png" alt="" width="150px" height="40px" />
 </div>
 <div class="parts" id="div4">
       <img src="images/about_title.png" alt="" width="150px" height="40px" />
 </div>
 <div class="parts" id="div5">
       <img src="images/about_title.png" alt="" width="150px" height="40px" />
 </div>
 <div class="parts" id="div6">
       <img src="images/about_title.png" alt="" width="150px" height="40px" />
 </div>
 <div class="parts"  id="div7">
    <img src="images/about_title.png" alt="" width="150px" height="40px" />
 </div>
 <div class="parts" id="div8">
    <img src="images/about_title.png" alt="" width="150px" height="40px" />
 </div>

and jquery:

  $(document) .ready(function(){
     $(".parts").each(function(){
         $(this).fadeIn();
     });
  });

possible duplicate of [Fade in each element - one after another](http://stackoverflow.com/questions/379900/fade-in-each-element-one-after-another) — billyonecan, Jun 30 '14 at 09:44

score 1 · Accepted Answer · answered Jun 30 '14 at 09:43

1

Try this

$(".parts").each(function(index) {
    $(this).delay(400*index).fadeIn(300);
});

DEMO

OR

$('.parts').each(function(i) {
    $(this).hide().delay(i * 3500).fadeIn(1500);
});

DEMO

answered Jun 30 '14 at 09:43

Sridhar R

20,190
6
38
35

@IVIajid Glad to help u >:-) – Sridhar R Jun 30 '14 at 10:10

fadeIn some div one by one using jquery

1 Answers1