Jquery fade in order from top to bottom

Question

JS:

$(function(){
 chainAnim('.section','slow','1')  });
 function chainAnim(e,s,o) {
        var $fade = $(e);
        var code = "console.log('Done.');";
        $fade.each(function(){
   code = "$('#"+$(this).attr('id')+"').fadeTo('"+s+"','"+o+"',function(){"+code+"});";
        });
        eval(code);
}

HTML:

 <div id="wrapper">
  <div class="section" id="section-1">Section 1</div>
  <div class="section" id="section-2">Section 2</div>
  <div class="section" id="section-3">Section 3</div>
  <div class="section" id="section-4">Section 4</div>
 </div>

When animating,section 4 is animated in first. How can I reverse this?

Answer 1

Of course section 4 is animated first, because "code" is set to the last one in the loop ;)

Code gets overwritten in every loop cycle, you should use += instead of = in the loop.

Anyway, your approach isn't best practice, check this out:

Edit: Recursive Fade!

$(document).ready(function() {
 chainAnim($('.section'), 'slow', 1);
});

function chainAnim(e, s, o) {
  e = $.makeArray(e);
  if(e.length == 0) { return; }
  $(e.shift()).fadeTo(s, o, function() {
    console.log('Done.');
    chainAnim(e, s, o);
  });
}

Demo: http://jsfiddle.net/97dEc/3/

Answer 2

This should do what you want, but I got rid of your eval() code. Not sure why you were taking that approach.

Example: http://jsfiddle.net/wqWE5/

I also changed the second argument from "slow" to 800 so it could be used in the .delay().

The duration you pass multiplied by the current index of the .each() will make the animation happen in sequence.

$(function(){
     chainAnim('.section',800,'1');
});

function chainAnim(e,s,o) {
        var $fade = $(e);
        var code = function() {console.log('Done.');};
        $fade.each(function( i ){
            $(this).delay(i * s).fadeTo(s,o,code);
        });
}