JQuery исчезают в порядке сверху вниз

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>

При анимации раздел 4 анимируется первым. Как я могу изменить это?

Answer 1

Это должно делать то, что вы хотите, но я избавился от вашего eval() кода. Не уверен, почему вы выбрали такой подход.

Пример: http://jsfiddle.net/wqWE5/

Я также изменил второй аргумент с "slow" на 800, чтобы его можно было использовать в .delay().

Длительность, которую вы передаете, умноженная на текущий индекс .each(), сделает анимацию последовательной.

$(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

Почему бы просто не сместить fadeIn () с задержкой ()

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

Чтобы изменить их, просто сделайте

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

Answer 3

Конечно, раздел 4 анимируется первым, потому что «код» установлен последним в цикле;)

Код перезаписывается в каждом цикле цикла, вы должны использовать + = вместо = в цикле.

В любом случае, ваш подход - не лучшая практика, проверьте это:

Редактировать: 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);
  });
}

Демо: http://jsfiddle.net/97dEc/3/