Come faccio ad animare in jQuery senza impilare i callback?

Question

Diciamo che ho tre div e mi piacerebbe che ciascuno animasse una volta terminato il precedente. Attualmente, scrivo questo:

$('div1').fadeOut('slow', function() { 
    $('div2').fadeOut('slow', function() { 
     $('div3').fadeOut('slow'); 
    }); 
}); 

Che è brutto, ma gestibile.

Ora immagino di avere 10 diverse animazioni che devono accadere una dopo l'altra su diversi elementi. Improvvisamente il codice diventa così goffo che è estremamente difficile da gestire ...

Ecco pseudocodice per quello che sto cercando di fare:

$('div1').fadeOut('slow' { delay_next_function_until_done: true }); 
$('div2').fadeOut('slow' { delay_next_function_until_done: true }); 
$('div3').animate({ top: 500 }, 1000); 

Come posso raggiungere questo obiettivo?

Answer 1

Se stai usando una versione recente di jQuery, utilizzare il promesse di animazione:

$('div1').fadeOut('slow').promise().pipe(function() { 
    return $('div2').fadeOut('slow'); 
}).pipe(function() { 
    return $('div3').animate({ top: 500 }, 1000); 
}); 

si può rendere generico:

$.chain = function() { 
    var promise = $.Deferred().resolve().promise(); 
    jQuery.each(arguments, function() { 
     promise = promise.pipe(this); 
    }); 
    return promise; 
}; 

var animations = $.chain(function() { 
    return $('div1').fadeOut('slow'); 
}, function() { 
    return $('div2').fadeOut('slow'); 
}, function() { 
    return $('div3').animate({ top: 500 }, 1000); 
}); 

$.when(animations).done(function() { 
    // ALL ANIMATIONS HAVE BEEN DONE IN SEQUENCE 
}); 

Ancora molte chiusure di funzioni, ma questa è la natura stessa di Javascript. Tuttavia, è molto più naturale e molto più flessibile usando Deferred/Promises dato che si evitano i callback "inception".

Answer 2

provare qualcosa di simile:

$('div1').fadeOut(); 
$('div2').delay(500 ).fadeOut(); 
$('div3').delay(1000).fadeOut(); 

Regolare i tempi, se necessario

Answer 3

Utilizzare questa:

$('#div1, #div2, #div3').each(function(index){ 
    $(this).delay(1000 * index).hide(1000); 
}); 

Se si può dare la <div> s una classe:

$('.forHide').each(function(index, value){ 
    $(this).delay(1000 * index).hide(1000); 
});​ 

• Il primo elemento scompare dopo 1000 * 0 = subito con animazione di un secondo.
• Il secondo elemento scompare dopo 1000 * 1 = Un secondo con animazione di un secondo.
• Il terzo elemento scompare dopo 1000 * 2 = Due secondi con animazione di un secondo.
• ...
• ...
• L'elemento n svanisce in dopo 1000 * n = n secondi con animazione di un secondo.

Live DEMO

Answer 4

callback è un amico, Non spingerlo via. Ci sono modi per semplificarli.Ecco uno di loro

$('div1').fadeOut('slow', div2) 
function div3() { $('div3').fadeOut('slow'); } 
function div2() { $('div2').fadeOut('slow', div3); } 

Answer 5

Un modo per farlo sarebbe quello di scrivere la propria funzione di supporto, in questo modo:

$.fn.sequentialFade = function() { 
    if(this.length > 0) { 
     var $set = $(this); 
     $set.eq(0).fadeOut(function() { 
      $set.slice(1).sequentialFade(); 
     }); 
    } 
} 

e usarlo in questo modo:

$('.div1, .div2. .div3').sequentialFade(); 

http://jsfiddle.net/JpNgv/

Answer 6

Lo faccio, con questo metodo puoi mettere tutti i div che vuoi, solo aggiungendo o eliminando elementi nella lista var, puoi anche riordinarli e non devi preoccuparti del tempo di ritardo.

var list = [ '#div1', '#div2', '...' ]; 
var i = 0; 
function fade(cb) { 
    if (i < list.length) { 
     $(list[i]).fadeOut('slow', function() { 
      i++; 
      fade(cb); 
     }); 
    } else { 
     cb && cb(); 
    } 
} 
fade(); 

è anche possibile aggiungere una richiamata quando il processo termina

fade(function(){alert('end')}); 

Demo

Answer 7

Quando le funzioni di completamento di sempre o callback vengono annidati troppo in profondità o il codice sta ottenendo ripetuto più e più volte, ho tendono a pensare a una soluzione di tabella di dati con una funzione comune:

function fadeSequence(list) { 
    var index = 0; 
    function next() { 
     if (index < list.length) { 
      $(list[index++]).fadeOut(next); 
    } 
    next(); 
} 

var fades = ["div1", "div2", "div3", "div4", "div5"]; 
fadeSequence(fades); 

E, se si desidera un diverso tipo di animazione per alcuni elementi, è possibile creare una serie di oggetti che descrivono ciò che ogni animazione successiva dovrebbe essere. È possibile inserire tutti i dettagli nell'array di oggetti necessari. Si può anche animazioni Uso combinato con altro metodo di jQuery sincrono chiamate in questo modo:

function runSequence(list) { 
    var index = 0; 
    function next() { 
     var item, obj, args; 
     if (index < list.length) { 
      item = list[index++]; 
      obj = $(item.sel); 
      args = item.args.slice(0); 
      if (item.sync) { 
       obj[item.type].apply(obj, args); 
       setTimeout(next, 1); 
      } else { 
       args.push(next); 
       obj[item.type].apply(obj, args); 
      } 
     } 
    } 
    next(); 
} 

// sequence of animation commands to run, one after the other 
var commands = [ 
    {sel: "#div2", type: "animate", args: [{ width: 300}, 1000]}, 
    {sel: "#div2", type: "animate", args: [{ width: 25}, 1000]}, 
    {sel: "#div2", type: "fadeOut", args: ["slow"]}, 
    {sel: "#div3", type: "animate", args: [{ height: 300}, 1000]}, 
    {sel: "#div3", type: "animate", args: [{ height: 25}, 1000]}, 
    {sel: "#div3", type: "fadeOut", args: ["slow"]}, 
    {sel: "#div4", type: "fadeOut", args: ["slow"]}, 
    {sel: "#div1", type: "fadeOut", args: ["slow"]}, 
    {sel: "#div5", type: "css", args: ["position", "absolute"], sync: true}, 
    {sel: "#div5", type: "animate", args: [{ top: 500}, 1000]} 
]; 
runSequence(commands); 

Ed, ecco una demo funzionante di questa seconda opzione: http://jsfiddle.net/jfriend00/PEVEh/