Jak animować w jQuery bez łączenia zwrotnego?

Question

Załóżmy, że mam trzy divy i chciałbym, aby każdy animował się po wykonaniu poprzedniego. Obecnie piszę:

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

Co jest brzydkie, ale łatwe w zarządzaniu.

Teraz wyobraź sobie, że mam 10 różnych animacji, które muszą się zdarzyć jedna po drugiej na różnych elementach. Nagle kod dostaje tak niezgrabne, że jest to niezwykle trudne do zarządzania ...

Oto pseudokod dla czego szukam zrobić:

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

Jak to osiągnąć?

Answer 1

Jeśli używasz najnowszej wersji jQuery, użyj obietnice animacja:

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

można zrobić to ogólna:

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

Nadal wiele funkcji zamknięć, ale to jest bardzo charakter JavaScript. Jest jednak o wiele bardziej naturalny i bardziej elastyczny przy użyciu Odroczonych/Obietnic, ponieważ unikasz "wywoływania" wywołań zwrotnych.

Answer 2

spróbować czegoś takiego:

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

Regulacja taktowania jako niezbędnego

Answer 3

użyj:

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

Jeśli można dać <div> s klasa:

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

• Pierwszy element zanika po 1000 * 0 = natychmiast z animacją trwającą jedną sekundę.
• Drugi element zanika po 1000 * 1 = Jedna sekunda z animacją jednej sekundy.
• Trzeci element zanika po 1000 * 2 = Dwie sekundy z animacją jednej sekundy.
• ...
• ...
• Element n wyłania się po 1000 * n = n sekund animacji jednej sekundy.

Live DEMO

Answer 4

oddzwaniania jest przyjacielem, nie naciskać go. Są sposoby na ich uproszczenie.Oto jeden z nich

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

Answer 5

Jednym ze sposobów, aby to zrobić byłoby napisać własną funkcję pomocnika, tak:

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

i używać go tak:

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

http://jsfiddle.net/JpNgv/

Answer 6

Robię to, za pomocą tej metody możesz umieścić wszystkie elementy div tak, jak chcesz, tylko dodając lub usuwając elementy z listy var, możesz również zmienić ich kolejność i nie musisz się martwić opóźnieniem.

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

można również dodać do wywołania zwrotnego, gdy proces kończy

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

Demo

Answer 7

gdy kiedykolwiek funkcje zakończeniu lub callbacks się zagnieżdżone zbyt głęboko lub kod jest uzyskiwanie powtarzane w kółko, I mają tendencję do myślenia o rozwiązaniu z tablicą danych o wspólnej funkcji:

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

Jeśli chcesz uzyskać inny typ animacji dla niektórych elementów, możesz utworzyć tablicę obiektów opisujących, czym powinna być każda kolejna animacja. Możesz umieścić tyle szczegółów w tablicy obiektów, ile potrzeba. Można nawet INTERMIX animacje z drugiej synchronicznej metody jQuery zwraca tak:

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

A oto demo działa od tej drugiej opcji: http://jsfiddle.net/jfriend00/PEVEh/