Met de jQuery animate() methode kun je animaties maken.
Syntaxis
$(kiezer).animate({CSS_eigenschappen}, snelheid, terugroep);
Het argument CSS_eigenschappen bevat de te animeren CSS eigenschap(pen).
Het facultatieve argument snelheid bepaald de snelheid waarmee animatie wordt uitgevoerd. Je gebruikt als waarden slow, fast of een tijd in milliseconden.
Het facultatieve argument terugroep is de naam van een functie die na het voltooien van de animatie wordt uitgevoerd.
Onderstaande voorbeeld verplaatst een div tag naar rechts tot de CSS eigenschap left 250 px bereikt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Animatie</title> <script src="jquery.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({left:'250px'}); }); }); </script> </head> <body> <button>Animatie starten</button> <p>Standaard hebben alle HTML tags een statische positie en kunnen ze niet verplaatst worden. Om de positie te manipuleren, moet je de CSS eigenschap position van de tag aanpassen naar relative, fixed of absolute!</p> <div style="background:#98bf21; height:100px; width:100px; position:absolute;"></div> </body> </html>
Voorbeeld
$("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); });
Opmerkingen
De namen van de CSS eigenschappen gebruiken de camel-case schrijfwijze. M.a.w. in de animate() methode gebruik je paddingLeft voor de CSS eigenschap padding-left, marginRight voor margin-right, enz.
Kleurenanimatie zit niet in de standaard jQuery bibliotheek. Voor kleuranimaties heb je de Color Animation plugin nodig (deze kun je downloaden van jQuery.com).
Het gebruik van relatieve animatiewaarden laat toe animaties de maken die oorspronkelijke CSS eigenschappen aanpassen (laten toenemen += of laten afnemen -=).
Voorbeeld
$("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); });
De voorgedefinieerde animatie waarden zijn: show, hide en toggle.
Voorbeeld
$("button").click(function(){ $("div").animate({ height:'toggle' }); });
Animaties op één en dezelfde tag kunnen in een wachtrij geplaatst worden om na elkaar uitgevoerd te worden.
Voorbeeld
$("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); });
Het volgende voorbeeld verplaatst een div tag naar rechts en vergroot nadien de tekst:
$("button").click(function(){ var div=$("div"); div.animate({left:'100px'},"slow"); div.animate({fontSize:'3em'},"slow"); });
Tip
Gebruik een tweede gelijkaardige animate() methode om in de animatie een pauze in te lassen:
$("button").click(function(){ var div=$("div"); div.animate({left:'100px'},"slow"); div.animate({fontSize:'3em'},"slow"); div.animate({fontSize:'3em'},"slow"); });
Om animaties op verschillende tags na elkaar uit te voeren, maak je gebruik van een terugroepfunctie:
Syntaxis
$(kiezer).animate({CSS_eigenschappen}, snelheid, function(){ $(kiezer).animate({CSS_eigenschappen}, snelheid); });
De tweede animate() methode wordt pas uitgevoerd na het voltooien van de eerste animate() methode. Daarbij mag de kiezer van de twee animate() methoden verschillen.