jQuery animado múltiple() de devolución de llamada

que estoy tratando de animar un conjunto de elementos al mismo tiempo (casi, hay un pequeño retraso entre cada animación):jQuery animado múltiple() de devolución de llamada

$('.block').each(function(i){ 
    $(this).stop().delay(60 * i).animate({ 
    'opacity': 1 
    }, { 
     duration: 250, 
     complete: mycallbackfunction // <- this fires the callback on each animation :(
    }); 
});

¿Cómo puedo ejecutar una función de devolución de llamada después de todas las animaciones tienen ¿terminado?

Fuente

2011-04-28 Alex

que puede tener cada anim individuo. Incremente un valor, y si ese valor es = número de animaciones, ejecute la función real – davidosomething

¿Hay alguna razón por la que no puede llamar a mycallbackfunction después de $ (".bloquear") cada declaración? o estoy malinterpretando tu código? –

sí. Si hago eso, la función se ejecutará de inmediato. Quiero esperar a que finalicen las animaciones, luego ejecutarlo – Alex

Utilice un cierre alrededor de una variable de contador.

var $blocks = $('.block'); 
var count = $blocks.length; 
$blocks.each(function(i){ 
    $(this).stop().delay(60 * i).animate({ 
    'opacity': 1 
    }, { 
     duration: 250, 
     complete: function() { 
     if (--count == 0) { 
      // All animations are done here! 
      mycallbackfunction(); 
     } 
     } 
    }); 
});

Tenga en cuenta el guardado de la lista de elementos en la variable $ block para guardar una búsqueda.

Fuente

2011-04-28 18:45:59 kcbanner

acaba de hacer la disminución en 'myCallbackFn()' ... pero esta es la única respuesta que veo –

Para hacer la disminución en 'mycallbackfunction()', debe definirse en el mismo ámbito que 'count' . El ejemplo de OP no mostró dónde se definió 'mycallbackfunction()'. – kcbanner

gracias! esto parece funcionar: D pero tienes un error: debería ser 'if (count == 0) mycallbackfunction();' – Alex

var block = $('.block'); 
    block.each(function(i){ 
    $(this).stop().delay(60 * i).animate({ 
    'opacity': 1 
    }, { 
     duration: 250, 
     complete: i== (block.length-1) ? myCallbackFunction : function(){} 
    }); 
    });

Fuente

2011-04-28 18:56:12

$('.block').each(function(i){ 
    $(this).stop().delay(60 * i).animate({ 
    'opacity': 1 
    }, { 
     duration: 250, 
     complete: ((i == $('.block').length - 1) ? mycallbackfunction : null) 
    }); 
});

Fuente

2011-04-28 18:56:30 mVChr

Desde jQuery 1.5, puede utilizar $.when^[docs], que es un poco más fácil de escribir y comprender:

var $blocks = $('.block'); 

$blocks.each(function(i){ 
    $(this).stop().delay(60 * i).animate({ 
    'opacity': 1 
    }, { 
     duration: 250 
    }); 
}); 

$.when($blocks).then(mycallbackfunction);

DEMO

Fuente

2011-09-11 13:19:14

Eso disparará la devolución de llamada incluso si las animaciones se detuvieron mediante '.stop()'. – antitoxic

Felix Kling's answer disparo la devolución de llamada cuando no hay animación queda por hacer. Esto hace que la devolución de llamada inicie incluso si la animación es detenida a través de $el.stop() y por lo tanto no se completa hasta el final.

he encontrado un method by Elf Sternberg utilizando objetos diferido los cuales he implementado en este jsFiddle:

http://jsfiddle.net/8v6nZ/

Fuente

2011-09-29 18:26:45 antitoxic

jQuery animado múltiple() de devolución de llamada

Respuesta

Cuestiones relacionadas