jQuery Effecten - Animatie

De jQuery animate() methode staat je toe om aangepaste animaties te maken.

Effect demonstratie



jQuery

jQuery animatie - animate() methode

De jQuery animate() methode wordt gebruikt om aangepaste animaties te maken.

Syntax:

$(selector).animate({params},speed,callback);

Verplicht params De parameter defines the CSS properties that form the animation.

Optioneel speed De parameter specifies the duration of the effect. It can take the following values: "slow", "fast" or milliseconds.

Optioneel callback De parameter is de naam van de functie die wordt uitgevoerd nadat de animatie is voltooid.

Hier is een voorbeeld die de eenvoudige toepassing van de animate() methode demonstreert; het verplaatst het <div>-element naar links tot de left-eigenschap 250 pixels is:

Voorbeeld

$("button").click(function(){
  $("div").animate({left:'250px'});
);

Probeer het zelf

Tip:Standaard hebben alle HTML-elementen een statische positie en kunnen ze niet worden verplaatst.

Als je de positie wilt manipuleren, onthoud dan om eerst de CSS position-eigenschap van het element in te stellen op relative, fixed of absolute!

jQuery animate() - Manipuleren van meerdere eigenschappen

Let op, je kunt meerdere eigenschappen tegelijk gebruiken tijdens het genereren van een animatie:

Voorbeeld

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  );
);

Probeer het zelf

Tip:Kan je de animate() methode gebruiken om alle CSS-eigenschappen te manipuleren?

Ja, bijna! Maar er is iets belangrijk om te onthouden: wanneer je animate() gebruikt, moet je CamelCase gebruiken voor alle eigenschapsnamen, zoals, je moet padding-left gebruiken in plaats van padding-left, margin-right in plaats van margin-right, enzovoort.

Bovendien is kleuranimatie niet inbegrepen in de core jQuery-bibliotheek.

Als je een kleuranimatie wilt maken, moet je de Color Animations plug-in downloaden van jQuery.com.

jQuery animate() - Gebruik van relatieve waarden

Je kunt ook relatieve waarden definiëren (deze waarde is ten opzichte van de huidige waarde van het element). Je moet een += of -= voor de waarde zetten:

Voorbeeld

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  );
);

Probeer het zelf

jQuery animate() - Gebruik van vooraf gedefinieerde waarden

Je kunt de animatiewaarden van de eigenschappen zelfs instellen op "show", "hide" of "toggle":

Voorbeeld

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  );
);

Probeer het zelf

jQuery animate() - Gebruik van de wachtrijfunctie

Standaard biedt jQuery een wachtrijfunctie voor animaties aan.

Dit betekent dat als je meerdere animate() aanroepen achter elkaar schrijft, jQuery een 'interne' wachtrij maakt die deze aanroepen bevat. Vervolgens worden deze animate-aanroepen afzonderlijk uitgevoerd.

Voorbeeld 1

Verbergen, als je verschillende animaties na elkaar wilt uitvoeren, moeten we de functie van de wachtrij gebruiken:

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

Probeer het zelf

Voorbeeld 2

Hier is een voorbeeld dat de <div> element naar de rechterkant verplaatst en de tekstgrootte vergroot:

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
);

Probeer het zelf