How to make elements fade after each other?

Question

I have a problem with my jQuery code. I have this jQuery to make elements fade in with adding class. Animated to each element:

$(function(){
      var $elems = $('.animateblock');
      var winheight = $(window).height();
      var fullheight = $(document).height();
      $(window).scroll(function(){
        animate_elems();
      });
      function animate_elems() {
           wintop = $(window).scrollTop(); 
           $elems.each(function(){
               $elm = $(this);     
               if($elm.hasClass('animated')) { return true; } 
               topcoords = $elm.offset().top; // element's distance from top of page in pixels
               if(wintop > (topcoords - (winheight*.75))) {
                   $elm.each(function(index) {
                       $(this).delay(300*index).addClass('animated');
                   });           
               }
           });
      } 
});  

How I can make element fade after each other with delay?

Answer 1

You can do this with just CSS - jQuery is not necessary. You can achieve this with something like stagger.css

http://digitalfio.github.io/Stagger.css/

Apply the animation classes to each div then add a timing class to each div in the form of an underscore followed by an incrementing number - e.g.

<div class="animated slideIn _1"></div>
<div class="animated slideIn _2"></div>
<div class="animated slideIn _3"></div>
<div class="animated slideIn _4"></div>

so you get something like this: http://output.jsbin.com/cusuz/4

Answer 2

It can be simply done by using the fadeIn function , and provide the required delay to this function.

var animated = $('.divs:first');
/* Need the first Element to FadeIn*/

/*I have stared the loop on document Ready*/
$(document).ready(function(){
   fadeNext(animated);                  
});


function fadeNext(elem){
   var eachDelay= 200;
   /*check the necessary condition before you fadeIn the element*/
   $(elem).fadeIn(eachDelay,function(){
       $(elem).addClass('animated');
       var nextElem = $(elem).next('.divs');
       if(nextElem.length > 0){
           fadeNext(nextElem);
       }
   });
 }

*{
    padding:0;
    margin:0;
}
.divs{
    width:cals(100% - 5px);
    height:40px;
    display:none;
    background-color:#008800;
    color:white;
    padding:10px 10px 0 10px;
    border-bottom:1px solid yellow;
    text-align:center;
    font-size:24px;
}
.animated{
    background:red;
}

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<div class="divs">A</div>
<div class="divs">B</div>
<div class="divs">C</div>
<div class="divs">D</div>
<div class="divs">E</div>
<div class="divs">F</div>
<div class="divs">G</div>
<div class="divs">H</div>
<div class="divs">I</div>

Answer 3

By making use of the index value that could be obtained from jquery .each() function you can delay them gradually like in this JS Fiddle

var eachDelay = 200,
  animated = $('.animated');
animated.each(function(index) {
  $(this).delay(index * eachDelay).animate({ 'opacity': 1 }, 1000);
});

* {
  padding: 0;
  margin: 0;
}
.animated {
  opacity: 0;
}
.divs {
  width: cals(100% - 5px);
  height: 40px;
  display: block;
  background-color: #008800;
  color: white;
  padding: 10px 10px 0 10px;
  border-bottom: 1px solid yellow;
  text-align: center;
  font-size: 24px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="divs animated">A</div>
<div class="divs animated">B</div>
<div class="divs animated">C</div>
<div class="divs animated">D</div>
<div class="divs animated">E</div>
<div class="divs animated">F</div>
<div class="divs animated">G</div>
<div class="divs animated">H</div>
<div class="divs animated">I</div>

---

Update:

If you want to fade them in as you scroll down - even though you didn't mention it in your OP but it kind of looks like it - check this JS Fiddle 2 where li fades in as they scrolled up into the window view