Jquery fondu dans l'ordre de haut en bas

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> 

Lors de l'animation, la section 4 est animé en premier. Comment puis-je inverser cela?

Answer 1

Cela devrait faire ce que vous voulez, mais je me suis débarrassé de votre code eval(). Je ne sais pas pourquoi vous preniez cette approche.

Exemple:http://jsfiddle.net/wqWE5/

J'ai aussi changé le deuxième argument "slow"-800 il pourrait donc être utilisé dans le .delay().

La durée que vous passez multipliée par l'indice actuel du .each() fera que l'animation se déroulera en séquence.

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

de l'article cours 4 est animé d'abord, parce que « le code » est réglé sur la dernière dans la boucle;)

code est écrasé dans chaque cycle de boucle, vous devez utiliser + = au lieu de = dans la boucle .

Quoi qu'il en soit, votre approche n'est pas la meilleure pratique, vérifier cela:

Edit: récursive 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); 
    }); 
} 

Démo: http://jsfiddle.net/97dEc/3/

Answer 3

Pourquoi ne pas simplement compenser la fadeIn() avec un retard()

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

Pour les inverser le faire

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