Jquery fade in order from top to bottom

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</d开发者_运维知识库iv>
  <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?

---

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

---

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/

---

Why not just offset the fadeIn() with a delay()

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

To reverse them just do

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