JQuery fades 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 first animated. How can this be changed?

Answer 1

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

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

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

The duration of the passage, multiplied by the current index .each(), will make the animation 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);
        });
} 

Answer 2

, 4 , "" ;)

, + = = .

, , :

: 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);
  });
}

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

Answer 3

Why not just shift fadeIn () with a delay ()

$('#wrapper .section').each(function(i){
    $(this).delay(i*site.rate).fadeIn(site.rate);
});

To undo them just do

$('#wrapper .section').each(function(i){
  var c = $('#wrapper .section').length;
  $(this).delay( (c-i) *site.rate).fadeIn(site.rate);
});