jQuery effect - animate() methode

jQuery Effect Referenties Handleiding

Voorbeeld

Verander de hoogte van het "div" element:

$(".btn1").click(function(){
  $("#box").animate({height:"300px"});
});

Probeer het zelf

Definitie en gebruik

De animate() methode voert een aangepaste animatie uit voor een set van CSS-eigenschappen.

Deze methode verandert een element van de ene staat naar de andere door gebruik te maken van CSS-stijlen. De waarde van de CSS-eigenschappen verandert geleidelijk, waardoor een animatie kan worden gecreëerd.

Alleen numerieke waarden kunnen animaties maken (bijvoorbeeld "margin:30px"). Stringwaarden kunnen geen animaties maken (bijvoorbeeld "background-color:red").

Opmerking:Gebruik "+=" of "-=" om relatieve animaties (relative animations) te maken.

Syntax 1

$(selector).animate(styles,speed,easing,callback)
Parameters Beschrijving
styles

Verplicht. Bepaal de CSS-stijl en waarden die de animatie moeten genereren.

Mogelijke CSS-waarden (geef een voorbeeld):

Opmerking:CSS-stijlen gebruiken DOM-namen (bijv. "fontSize") om in te stellen, niet CSS-namen (bijv. "font-size").
speed

Optioneel. Snelheid van de animatie instellen. Standaard is "normal".

Mogelijke waarden:

  • miliseconden (bijv. 1500)
  • "slow"
  • "normal"
  • "fast"
easing

Optioneel. Easing-functie instellen voor verschillende punten in de animatie.

Ingebouwde easing-functies:

  • swing
  • linear

Uitgebreide plug-ins bieden meer easing-functies.
callback

Optioneel. Functie die moet worden uitgevoerd nadat de animate-functie is voltooid.

Voor meer informatie over callbacks, bezoek onze jQuery Callback Dit hoofdstuk.

Syntax 2

$(selector).animate(styles,options)
Parameters Beschrijving
styles Verplicht. De CSS-stijlen en waarden die de animatie moeten produceren (zoals hierboven)
options

Optioneel. Bijkomende opties voor de animatie

Mogelijke waarden:

  • speed - de snelheid van de animatie instellen
  • easing - de te gebruiken easing-functie
  • callback - de functie die moet worden uitgevoerd nadat de animatie is voltooid
  • step - de functie die moet worden uitgevoerd nadat elke stap van de animatie is voltooid
  • queue - een booleaanse waarde. Indicatie of een animatie in de effectenwachtrij wordt geplaatst. Als false, begint de animatie onmiddellijk
  • specialEasing - afkomstig van styles Mapping van een of meerdere CSS-eigenschappen en hun bijbehorende easing-functies

jQuery Effect Referenties Handleiding