Load div (fade in) step by step

Question

I make a html page. I want load step by step in page with jQuery but I don't know make it.

My HTML code:

<div class="main-template">
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
</div>

Fade-in burst in sequence!

score 1 · Accepted Answer · answered Jul 08 '17 at 07:10

Try like below:

$(function(){
$('.main-child').hide();
$('div.main-child').each(function(i){
$(this).delay(i*800).fadeIn('slow');
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main-template">
    <div class="main-child">1</div>
    <div class="main-child">2</div>
    <div class="main-child">3</div>
    <div class="main-child">4</div>
    <div class="main-child">5</div>
    <div class="main-child">6</div>
    <div class="main-child">7</div>
    <div class="main-child">8</div>
    <div class="main-child">9</div>
    <div class="main-child">10</div>
    <div class="main-child">11</div>
    <div class="main-child">12</div>
    <div class="main-child">13</div>
    <div class="main-child">14</div>
    <div class="main-child">15</div>
    <div class="main-child">16</div>
</div>

Did you check this? @Sushiant – lalithkumar Jul 08 '17 at 07:11 — lalithkumar, Jul 08 '17 at 07:11

score 0 · Answer 2 · answered Jul 08 '17 at 07:08

0

Try this

$('.main-child').each(function(i) {$(this).fadeOut(0).delay(1000*i).fadeIn(1850);});

Here Is JsFiddle

answered Jul 08 '17 at 07:08

Jaykumar Gondaliya

367
3
17

score 0 · Answer 3 · answered Jul 08 '17 at 07:08

Maybe something like this? We iterate through all the elements with .each() and set a setTimeout() with a time dependent on the index i.

$(".main-child").each(function (i) {
    var element = $(this); 
    setTimeout(function() { 
      element.animate({"opacity": 1}, 500);
    }, 200*i);
  });

.main-child{
  width: 100%;
  height: 20px;
  background-color: red;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-template">
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
</div>

Load div (fade in) step by step

3 Answers3