¿Cómo puedo animar en jQuery sin apilar devoluciones de llamada?

Question

Digamos que tengo tres divs, y me gustaría que cada uno animara una vez que haya terminado el anterior. Actualmente, escribo esto:

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

Cuál es feo, pero manejable.

Ahora imagine que tengo 10 animaciones diferentes que deben suceder una tras otra en diferentes elementos. De repente, el código se vuelve tan torpe que es extremadamente difícil de manejar ...

Aquí está pseudocódigo para lo que estoy buscando hacer:

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

¿Cómo lograr esto?

Answer 1

Si está utilizando una versión reciente de jQuery, utilice el promesas de animación:

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

Usted puede hacer que sea genérica:

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

Todavía hay un montón de cierres de funciones, pero esa es la naturaleza misma de Javascript. Sin embargo, es mucho más natural y mucho más flexible con Deferreds/Promises ya que evita el inicio de las retrollamadas.

Answer 2

intentar algo como:

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

Ajustar el tiempo que sea necesario

Answer 3

Utilice esta:

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

Si usted puede dar la <div> es una clase:

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

• El primer elemento desaparece después de 1000 * 0 = de inmediato con una animación de un segundo.
• El segundo elemento desaparece después de 1000 * 1 = Un segundo con una animación de un segundo.
• El tercer elemento desaparece después de 1000 * 2 = Dos segundos con una animación de un segundo.
• ...
• ...
• El elemento n desvanece en después de 1000 * n = n segundos con la animación de un segundo.

Live DEMO

Answer 4

devolución de llamada es un amigo, no te empuje en sentido contrario. Hay formas de simplificarlos.Aquí está uno de ellos

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

Answer 5

Una forma de hacer esto sería para escribir su propia función auxiliar, así:

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

y usarlo de esta manera:

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

http://jsfiddle.net/JpNgv/

Answer 6

Lo hago, con este método puedes poner todos los divs como quieras, solo agregando o eliminando elementos en la lista var, también puedes reordenarlos y no tienes que preocuparte por el tiempo de demora.

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

también se puede añadir una devolución de llamada cuando el proceso termina

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

Demo

Answer 7

Cuando funciones o devoluciones de llamada de finalización vez tienes anidados demasiado profundo o código está siendo repetido una y otra vez, tienden a pensar en una solución de tabla de datos con una función común:

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

Y, si deseaba un tipo diferente de animación para algunos de los elementos, podría crear una matriz de objetos que describan qué se supone que es cada animación sucesiva. Podría poner tantos detalles en la matriz de objetos como sea necesario. Puede incluso animaciones entremezclados con otro método jQuery sincrónica llamadas como esta:

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

Y, esto es una demostración de trabajo de esta segunda opción: http://jsfiddle.net/jfriend00/PEVEh/