Obwohl Pablo Martinez Antwort zeigt Ihnen, wie programmatisch die Verzögerung zu ändern, ist die Antwort fehlerhaft: es auf diese Weise zu tun bedeutet, dass wir jede Animation Timing-out sind (jQuery wahrscheinlich verwendet setTimeout intern oder ähnlich), und aufgrund der Art, wie die JavaScript-Engine funktioniert, können sich die Animationen überlappen, weil Timeouts nicht ausgeführt werden genau zur angegebenen Zeit, nur ungefähr. Wenn Sie versuchen, Ereignisse am Ende oder am Anfang jeder Animation auszulösen, werden Sie möglicherweise feststellen, dass die Ereignisse nicht in der erwarteten Reihenfolge ausgelöst werden (dies ist eine Tatsache, aber ich möchte kein Beispiel geben, um dies zu beweisen).
Um zu garantieren, dass Animationen werden nacheinander abgefeuert, Sie durch die .animate Methode auszuführen Animationen in Folge zurück Versprechen verwenden sollten, und dies wird zu 100% garantieren, dass die Animationen überlappen nacheinander und nie ausgeführt wird.
Die folgenden Codes sind nicht getestet, mit Techniken, die kurz erläutern in this answer werden (beachten Sie, diese Antwort auch die falsche Art und Weise unter Verwendung von Verzögerungen zeigt), und ist effektiv die gleiche, aber ohne Verzögerung Timing Annäherung:
const elems = $('.animateThis')
setTimeout(function() {
panelIn(0)
.then(() => panelIn(1)) // arrow function syntax
.then(() => panelIn(2))
.then(() => panelIn(3))
.then(() => panelIn(4))
.then(() => panelIn(5))
.then(() => panelIn(6))
.then(() => panelIn(7))
}, 500)
function panelIn(divNumber) {
const neww = '100%'
// return a promise (learn what promises are, they are useful!)
return $(elems[divNumber]).delay(100).animate({
width: neww
}, 500).promise()
}
wenn Sie in einer ES6 JavaScript-Umgebung sind die Asynchron-Funktionen unterstützt, können Sie den Code sauberer machen:
async function sleep() {
return new Promise(function(resolve) {
return setTimeout(resolve, duration)
})
}
function panelIn(divNumber) {
const neww = '100%'
return $(elems[divNumber]).delay(100).animate({
width: neww
}, 500).promise()
}
async function animateDivs() {
const elems = $('.animateThis')
// Fire each animation sequentially. The `await` keyword makes the engine wait for the given promise to be resolved.
await sleep(500)
await panelIn(0)
await panelIn(1)
await panelIn(2)
await panelIn(3)
await panelIn(4)
await panelIn(5)
await panelIn(6)
await panelIn(7)
}
animateDivs()
es weiter Kürzen, Pfeil Funktionen für sleep und eine for-Schleife:
const sleep = duration => new Promise(r => setTimeout(r, duration))
function panelIn(divNumber) {
const neww = '100%'
return $(elems[divNumber]).delay(100).animate({
width: neww
}, 500).promise()
}
async function animateDivs() {
const elems = $('.animateThis')
await sleep(500)
for (let i=0; i<8; i++)
await panelIn(i)
}
animateDivs()
Bonus: wenn Sie etwas nach all den Animationen abgeschlossen sind, schreiben Sie einfach eine andere Asynchron-Funktion tun wollen!
const sleep = duration => new Promise(r => setTimeout(r, duration))
function panelIn(divNumber) {
const neww = '100%'
return $(elems[divNumber]).delay(100).animate({
width: neww
}, 500).promise()
}
async function animateDivs() {
const elems = $('.animateThis')
await sleep(500)
for (let i=0; i<8; i++)
await panelIn(i)
}
async function animateDivsThenDoStuff() {
await animateDivs()
console.log('All animations complete!')
}
animateDivsThenDoStuff()
Mögliche Duplikat [Chaining jQuery Animationen, die verschiedenen Elemente beeinflussen] hier (http://stackoverflow.com/questions/4198091/chaining-jquery-animations-that-affect-different-elements) –
Überprüfen Sie, wie Sie (animationend) verwenden können, damit Sie den nächsten starten können usw. - http://blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end - aber Sie müssen stattdessen CSS3-Animationen verwenden (.animate()) – Tasos