Opération synchrone jQuery

Question

J'élimine les éléments un par un, mais il semble que tout disparaisse à la fois.

Comment estomper les éléments un à un. Seulement si l'un disparaît complètement, le second devrait commencer à s'estomper.

boucle I et se fanent comme ça

$(ele).fadeIn('slow'); 

Answer 1

J'ai fait ce plugin jQuery rapide/facile pour vous de faire exactement ce que vous voulez. :-)

$.fn.extend({ 
    serial_fade: function(o) { 
     if(!o.speed || o.speed == undefined || o.speed == null) { o.speed = 'slow'; } 
     if(!o.fade || o.fade == undefined || o.fade == null) { o.fade = 'in'; } 
     if(!o.index || o.index == undefined || o.index == null) { o.index = 0; } 
     var s = this.selector; 
     if(o.fade.toLowerCase() == 'in') { 
      return this.eq(o.index).fadeIn(o.speed, function() { 
       o.index++; 
       if($(s).eq(o.index).length > 0) { 
        $(s).serial_fade({speed:o.speed,fade:o.fade,index:o.index}); 
       } 
      }); 
     } else { 
      return this.eq(o.index).fadeOut(o.speed, function() { 
       o.index++; 
       if($(s).eq(o.index).length > 0) { 
        $(s).serial_fade({speed:o.speed,fade:o.fade,index:o.index}); 
       } 
      }); 
     } 
    } 
}); 

// To call it just do this: 
$(ele).serial_fade({speed:'slow',fade:'in'}); 

// Optionally, you can pass which element you want to start with (0-based): 
$('a').serial_fade({speed:'slow',fade:'in',index:2}); 

// If you want to start with element 2 (3, really) and fade all the rest *out* 
// sequentially, verrry slowly: 
$(ele).serial_fade({speed:5000,fade:'out',index:2}); 

Il devrait fonctionner avec tout type de sélecteur comme toute autre méthode jQuery fait. J'espère que cela fonctionne pour vous.

Edit: Je l'a étendu de manière à pouvoir faire ins fondu et fondu outs maintenant. Il semble juste plus utile de cette façon ...

Answer 2

fadeIn a un rappel qui exécute lorsque la décoloration est terminée. Ajoutez à chaque élément la classe elemX, où x est l'ordre des évanouissements. Ensuite, utilisez le code suivant:

startFading(1); 

function startFading(order) { 
    $(".ele" + order).fadeIn('slow', function() { 
     if (order < orderMax) { 
      startFading(order+1); 
     } 
    }); 
} 

Answer 3

Vous pouvez rendre cela générique et ne pas le forcer à être seulement pour les évanouissements.

function depth(collection, fun, i) { 
    if (i === undefined) 
     depth(collection, fun, 0); 
    else 
     if (i < collection.length) 
      fun(collection[i], function(){ 
       depth(collection, fun, i + 1); 
      }); 
}; 

depth($("a"), function(elem, fun) { 
    $(elem).fadeIn('slow', fun); 
});