jQuery-effekt - animate() metod

jQuery Effekter Referenshandbok

Exempel

Ändra höjden på "div"-elementet:

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

Prova själv

Definition och användning

animate()-metoden utför en anpassad animation av CSS-egenskapskombinationer.

Denna metod ändrar elementets tillstånd från ett till ett annat genom att använda CSS-stilar. CSS-egenskapsvärden ändras gradvis, vilket möjliggör animationseffekter.

Endast numeriska värden kan skapa animationer (t.ex. "marginal:30px"). Strängvärden kan inte skapa animationer (t.ex. "background-color:red").

Kommentar:Använd "+=" eller "-=" för att skapa relativa animationer (relative animations).

Syntax 1

$(selector).animate(styles,speed,easing,callback)
Parameter Beskrivning
styles

Obligatoriskt. Anger CSS-stilar och värden som skapar animationseffekter.

Möjliga CSS-värden (ge exempel):

Kommentar:CSS-stilar används med DOM-namn (t.ex. "fontSize") för att ställa in, inte med CSS-namn (t.ex. "font-size").
speed

Valfritt. Definierar animationens hastighet. Standard är "normal".

Möjliga värden:

  • millisekunder (t.ex. 1500)
  • "slow"
  • "normal"
  • "fast"
easing

Valfritt. Definierar easing-funktioner för att ställa in animationens hastighet vid olika punkter.

Inbyggda easing-funktioner:

  • swing
  • linear

Fler easing-funktioner tillhandahålls av utökade plugins.
callback

Valfritt. Funktion som ska köras efter att animate-funktionen har körts.

För att lära dig mer om callback, besök vår jQuery Callback Detta kapitel.

Syntax 2

$(selector).animate(styles,options)
Parameter Beskrivning
styles Obligatoriskt. Definierar CSS-stilar och värden som skapar animationseffekten (som ovan)
options

Valfritt. Definierar ytterligare alternativ för animationen

Möjliga värden:

  • speed - ställer in animationens hastighet
  • easing - definierar den easing-funktion som ska användas
  • callback - definierar vilken funktion som ska köras efter att animationen är klar
  • step - definierar vilken funktion som ska köras efter varje steg av animationen
  • queue - ett booleskt värde. Indikerar om animationer ska placeras i effektkö. Om det är false startar animationen omedelbart
  • specialEasing - från styles Kartläggning av en eller flera CSS-attribut och deras motsvarande easing-funktioner

jQuery Effekter Referenshandbok