Kedja och köa animationer
Utforska hur ni kan kedja flera animationsmetoder och hantera animationskön för att skapa sekventiella och samordnade visuella effekter i dynamiska gränssnitt.
Kedja och köa animationer är en gratis lektion i jQuery Academy på CoddyKit. Detta är lektion 1 av 3. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för jQuery Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i jQuery Academy innehåller totalt 3 lektioner.
Introduktion till animationskedjor
Föreställ er att ni vill att ett element ska flytta sig, sedan byta färg och därefter tonas ut. Att göra detta manuellt, steg för steg, kan vara besvärligt!
Animationskedjor i jQuery låter er länka samman flera animationsmetoder. Varje animation startar först när den föregående är klar, vilket skapar mjuka effekter i följd.
Grundläggande kedjesyntax
jQuery-metoder returnerar ofta själva jQuery-objektet. Därför kan ni anropa en annan metod direkt på resultatet och skapa en "kedja".
Här flyttas en ruta åt höger och sedan nedåt. Försök köra koden!
<!DOCTYPE html>
<html>
<head>
<title>jQuery Chaining</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.box {
width: 50px;
height: 50px;
background-color: blue;
position: relative;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div class="box" id="myBox"></div>
<button id="startAnimation">Start Chain</button>
<script>
$(document).ready(function() {
$("#startAnimation").on("click", function() {
$("#myBox")
.animate({left: '150px'}, 1000) // Move right
.animate({top: '50px'}, 800); // Move down
});
});
</script>
</body>
</html>Bygga komplexa sekvenser
Ni kan kedja ihop många animationsmetoder. jQuery placerar automatiskt dessa animationer i en intern kö och ser till att de körs i den ordning ni anger.
Detta skapar ett sekventiellt flöde för era UI-element. Se rutan flytta sig, växa och sedan tonas ut!
<!DOCTYPE html>
<html>
<head>
<title>Complex Chaining</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.box {
width: 50px;
height: 50px;
background-color: green;
position: relative;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div class="box" id="myBox"></div>
<button id="startAnimation">Start Sequence</button>
<script>
$(document).ready(function() {
$("#startAnimation").on("click", function() {
$("#myBox")
.animate({left: '100px'}, 800)
.animate({height: '100px', width: '100px'}, 600)
.animate({opacity: 0.5}, 500)
.animate({top: '100px'}, 700)
.fadeOut(500); // Fades out completely
});
});
</script>
</body>
</html>Så fungerar animationskön
När ni kedjar animationsmetoder kör jQuery dem inte alla samtidigt. I stället lägger jQuery till dem i en särskild lista som kallas animationskön (eller kön "fx").
- Den första animationen startar direkt.
- Efterföljande animationer väntar i kön.
- När en animation är klar hämtar jQuery automatiskt nästa animation ur kön och startar den.
Detta säkerställer att animationerna körs sekventiellt och förutsägbart.
Lägg till pauser med .delay()
Ibland behöver ni lägga in en paus mellan animationerna. Metoden .delay() passar perfekt för detta! Den pausar körningen av efterföljande objekt i animationskön under en angiven tidsperiod.
Rutan flyttar sig, pausar och flyttar sig sedan igen.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Delay</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.box {
width: 50px;
height: 50px;
background-color: purple;
position: relative;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div class="box" id="myBox"></div>
<button id="startAnimation">Start Animation</button>
<script>
$(document).ready(function() {
$("#startAnimation").on("click", function() {
$("#myBox")
.animate({left: '100px'}, 800) // Move right
.delay(1000) // Pause for 1 second
.animate({top: '50px'}, 800); // Move down
});
});
</script>
</body>
</html>Kör anpassad kod i kön
Ni kan lägga in funktioner som inte är animationer direkt i kön med hjälp av .queue(). Det gör att ni kan utföra åtgärder, som att ändra text eller lägga till en klass, exakt mellan animationerna.
Funktionen körs när det blir dess tur i kön. Kom ihåg att anropa next() i den anpassade funktionen för att tala om för jQuery att gå vidare till nästa objekt i kön!
<!DOCTYPE html>
<html>
<head>
<title>Custom Queue Function</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.box {
width: 50px;
height: 50px;
background-color: orange;
position: relative;
left: 0px;
}
</style>
</head>
<body>
<div class="box" id="myBox"></div>
<p id="status">Ready</p>
<button id="startAnimation">Start Sequence</button>
<script>
$(document).ready(function() {
$("#startAnimation").on("click", function() {
$("#myBox")
.animate({left: '100px'}, 800)
.queue(function(next) { // Add custom function to queue
$(this).css("background-color", "blue");
$("#status").text("Color changed!");
next(); // Crucial: tells jQuery to proceed
})
.animate({top: '50px'}, 800)
.queue(function(next) {
$("#status").text("Animation done!");
next();
});
});
});
</script>
</body>
</html>Avbryt animationer med .stop()
Vad gör ni om ni vill stoppa en animation mitt i förloppet? Metoden .stop() är lösningen. Den kan stoppa den animation som körs på ett element.
.stop(true): Stoppar den aktuella animationen och tömmer hela animationskön..stop(false, true): Stoppar den aktuella animationen och hoppar till dess slutläge, men tömmer inte kön.
Använd metoden försiktigt, eftersom den kan störa era noggrant planerade sekvenser!
<!DOCTYPE html>
<html>
<head>
<title>jQuery Stop</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.box {
width: 50px;
height: 50px;
background-color: teal;
position: relative;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div class="box" id="myBox"></div>
<button id="startAnimation">Start</button>
<button id="stopAnimation">Stop (clear queue)</button>
<script>
$(document).ready(function() {
$("#startAnimation").on("click", function() {
$("#myBox")
.animate({left: '150px'}, 2000)
.animate({top: '100px'}, 2000)
.animate({left: '0px'}, 2000);
});
$("#stopAnimation").on("click", function() {
$("#myBox").stop(true, false); // Stop current, clear queue, don't jump to end
});
});
</script>
</body>
</html>Hoppa till slutet av en animation med .finish()
Metoden .finish() är ett kraftfullt sätt att omedelbart slutföra alla animationer som för närvarande körs på ett element och tömma dess animationskö.
- Det fungerar ungefär som att anropa
.stop(true, true)för alla animationer. - Elementet hoppar omedelbart till slutläget för alla köade animationer.
Detta är användbart för knappar av typen "återställ" eller när ni snabbt vill övergå till elementets slutliga animerade läge.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Finish</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.box {
width: 50px;
height: 50px;
background-color: darkblue;
position: relative;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div class="box" id="myBox"></div>
<button id="startAnimation">Start Long Chain</button>
<button id="finishAnimation">Finish All</button>
<script>
$(document).ready(function() {
$("#startAnimation").on("click", function() {
$("#myBox")
.animate({left: '150px'}, 3000)
.animate({top: '100px'}, 3000)
.animate({width: '100px'}, 3000);
});
$("#finishAnimation").on("click", function() {
$("#myBox").finish(); // Instantly jump to final state
});
});
</script>
</body>
</html>Kedja olika effekter
Kedjning är inte bara till för .animate()! Ni kan kedja många andra jQuery-animationsmetoder, som .fadeIn(), .slideUp(), .slideToggle() med flera.
Dessa metoder använder också samma animationskö, vilket gör det enkelt att skapa komplexa visuella sekvenser.
<!DOCTYPE html>
<html>
<head>
<title>Mixed Animation Chain</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.box {
width: 80px;
height: 80px;
background-color: #3498db;
margin-bottom: 10px;
display: none; /* Start hidden */
}
</style>
</head>
<body>
<div class="box" id="myBox"></div>
<button id="startAnimation">Start Mixed Chain</button>
<script>
$(document).ready(function() {
$("#startAnimation").on("click", function() {
$("#myBox")
.fadeIn(500) // Fade in
.delay(500) // Pause
.slideUp(500) // Slide up
.delay(500) // Pause
.slideDown(500) // Slide down
.animate({width: '120px', height: '120px'}, 700); // Grow
});
});
</script>
</body>
</html>Snabb kontroll av kedjning
Studera följande jQuery-kod. Vilket blir slutläget för #myBox när ni klickar på knappen?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#myBox {
width: 50px;
height: 50px;
background-color: blue;
position: relative;
left: 0px;
opacity: 1;
}
</style>
</head>
<body>
<div id="myBox"></div>
<button id="btn">Click Me</button>
<script>
$(document).ready(function() {
$("#btn").on("click", function() {
$("#myBox")
.animate({left: '100px'}, 500)
.delay(500)
.animate({opacity: 0.5}, 500)
.hide(500);
});
});
</script>
</body>
</html>Repetition: Kedjor och köer
Utmärkt arbete! Ni har lärt er att skapa dynamiska, sekventiella visuella effekter med jQuerys mekanism för animationskedjor och köer.
- Kedjning: Länka samman flera animationsmetoder.
- Kö: jQuery hanterar animationerna i en sekvens.
.delay(): Pausa mellan animationerna..queue(): Lägg in anpassade funktioner i kön..stop(): Avbryt animationer eller töm kön..finish(): Slutför alla köade animationer omedelbart.
Härnäst går vi igenom anpassad easing och callback-funktioner för animationer, så att ni får ännu bättre kontroll!
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 22
- Lektioner
- 48
Vanliga frågor
Är lektionen ”Kedja och köa animationer” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen jQuery Academy, inklusive ”Kedja och köa animationer”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i jQuery Academy innehåller totalt 3 lektioner.
Vad lär jag mig i ”Kedja och köa animationer”?
Utforska hur ni kan kedja flera animationsmetoder och hantera animationskön för att skapa sekventiella och samordnade visuella effekter i dynamiska gränssnitt. Ni övar på jQuery Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig jQuery Academy?
Du behöver inga förkunskaper. Utbildningen i jQuery Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 3.
Hur lång tid tar lektionen ”Kedja och köa animationer”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här jQuery Academy-lektionen?
Ja. Varje jQuery Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Kedja och köa animationer
- Anpassad easing och callback-funktioner
- Avancerade växlings- och glideffekter