Un'animazione Div dopo l'altra utilizzando oggetto posticipato

Question

Animare Div dopo che l'animazione Div precedente è stata completata utilizzando deferred object. Questo semplice metodo funziona con le due funzioni f1 e f2, tuttavia quando introduco f3 non riesce.

Esiste un modo migliore per raggiungere questo obiettivo utilizzando l'oggetto posticipato?

JSFiddle: https://jsfiddle.net/j0bgzjvd/

var deferred = $.Deferred(); 
 

 
function animationAgent(element, prevElement) { 
 
    $(prevElement).promise().done(function() { 
 
    return $(element).css("display", "block").animate({width:360},2000, "linear") 
 
    }); 
 
} 
 

 
function f1() { 
 
    animationAgent("#div1"); 
 
} 
 

 
function f2() { 
 
    animationAgent("#div2", "#div1"); 
 
} 
 

 
function f3() { 
 
    animationAgent("#div3", "#div2"); 
 
} 
 

 
deferred.resolve(); 
 
deferred.done([ f1, f2, f3 ]);

div { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: red; 
 
    margin-bottom: 10px; 
 
    display: none; 
 
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 

 
<div id="div1"></div> 
 
<div id="div2"></div> 
 
<div id="div3"></div>

Answer 1

Troverete più semplice a:

• fanno animationAgent() in un semplice, funzione di operaio promessa-ritorno che conosce solo l'elemento che anima e nulla sulla sequenza in cui deve essere utilizzato (ovvero omettere),
• disporre le funzioni f1(), f2() e f3(), per restituire la promessa restituita loro dal animationAgent().

Quindi avete le basi per costruire una sequenza di animazione affidabile.

function animationAgent(element) { 
    return $(element).css("display", "block").animate({width:360}, 2000, "linear").promise(); 
} 
function f1() { 
    return animationAgent("#div1"); 
} 
function f2() { 
    return animationAgent("#div2"); 
} 
function f3() { 
    return animationAgent("#div3"); 
} 

f1().then(f2).then(f3); 

DEMO

alternativa, costruire la catena .then meccanicamente da un array di riferimenti funzionali:

function animationAgent(element) { 
    return $(element).css("display", "block").animate({width:360}, 2000, "linear").promise(); 
} 
function f1() { 
    return animationAgent("#div1"); 
} 
function f2() { 
    return animationAgent("#div2"); 
} 
function f3() { 
    return animationAgent("#div3"); 
} 

[f1, f2, f3].reduce(function(promise, fn) { 
    return promise.then(function() { 
     return fn(); 
    }); 
}, $.when()); 

DEMO

O, come i tre animazioni sono identico, y ou può evitare la necessità di singole funzioni costruendo la catena .then da una matrice di selettori di elementi e chiamando direttamente animationAgent():

function animationAgent(element) { 
    return $(element).css("display", "block").animate({width:360}, 2000, "linear").promise(); 
} 

['#div1', '#div2', '#div3'].reduce(function(promise, selector) { 
    return promise.then(function() { 
     return animationAgent(selector); 
    }); 
}, $.when()); 

DEMO

Answer 2

mai pensato di usare le richiamate nella funzione di animazione?

Ecco un esempio con fadeOut: https://jsfiddle.net/0r7e2wco/

fadeOutInTurn([ 
    $("#div1"), 
    $("#div2"), 
    $("#div3"), 
    $("#div4"), 
]); 

//Fades out elements one after another 
function fadeOutInTurn(elements) { 
    var x = 0; 
    function animate() { 
     $(elements[x]).fadeOut(3000, function() { 
      if(x < elements.length - 1) { 
       x++; 
       animate(); 
      } 
     }); 
    } 
    animate(); 
} 

Answer 3

non sono sicuro, ma penso che questo è ciò che si desidera.

esempio fiddle

Penso che si spera deferred.done() eseguirà f1, f2, f3 uno dopo altro bene fa che lavorare. ma non aspetta che le animazioni chiamate all'interno di queste funzioni terminino prima di chiamare la funzione successiva.

provare a registrare la funzione chiamate su console utilizzando console.log() e lo saprai.

qui è la versione aggiornata di codice javascript -

var deferred = $.Deferred(); 
var lock = 1; 

function animationAgent(element, id, prevElement) { 
    var interval; 
    var flag = 0; 
    if (id != lock) { 
    interval = setInterval(function() { 
     if (id == lock) { 
     clearInterval(interval); 
     animationAgent(element, id, prevElement); 
     } 
    }, 1000); 
    }else{ 
    $(prevElement).promise().done(function() { 
     lock++; 
     return $(element).css("display", "block").animate({ 
     width: 360 
     }, 2000, "linear"); 
    }); 
    } 
} 

function f1() { 
    return animationAgent("#div1", 1); 
} 

function f2() { 
    return animationAgent("#div2", 2, "#div1"); 
} 

function f3() { 
    return animationAgent("#div3", 3, "#div2"); 
} 

deferred.resolve(); 
deferred.done([f1, f2, f3]);