jQuery Effekter - Animation

jQuery animate() metoden giver dig mulighed for at oprette brugerdefinerede animationer.

Effekt præsentation



jQuery

jQuery animation - animate() metode

jQuery animate() metoden bruges til at oprette brugerdefinerede animationer.

Syntaks:

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

Obligatorisk params Parameteren definerer de CSS-egenskaber, der dannes animationen.

Valgfri speed Parameteren definerer varigheden af effekten. Det kan være følgende værdier: "slow", "fast" eller millisekunder.

Valgfri callback Parameteren er navnet på funktionen, der udføres efter afslutningen af animationen.

Her er et eksempel på en simpel anvendelse af animate() metoden; den flytter <div>-elementet til venstre, indtil left-egenskaben er lig med 250 pixels:

Eksempel

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

Prøv det selv

Tip:Standardmæssigt har alle HTML-elementer en statisk position og kan ikke flyttes.

Hvis du vil operere med position, skal du huske at sætte elementets CSS positionsegenskab til relative, fixed eller absolute!

jQuery animate() - opererer med flere egenskaber

Bemærk venligst, du kan bruge flere egenskaber samtidig under generering af animation:

Eksempel

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

Prøv det selv

Tip:Kan man bruge animate() til at operere med alle CSS-egenskaber?

Ja, næsten! Men, husk en vigtig ting: Når du bruger animate(), skal du bruge Kamelkarakterer til at skrive alle egenskabsnavne, f.eks. skal du bruge paddingLeft i stedet for padding-left, marginRight i stedet for margin-right, osv.

Samtidig er farveanimationer ikke inkluderet i jQuery-kernen.

Hvis du har brug for at generere farveanimationer, skal du downloade Color Animations-plugin fra jQuery.com.

jQuery animate() - Brug af relative værdier

Du kan også definere relative værdier (værdien er relativ til elementets nuværende værdi). Det kræver, at værdien foran tilføjes += eller -=:

Eksempel

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

Prøv det selv

jQuery animate() - Brug af prædefinerede værdier

Du kan endda sætte animationens værdi for egenskaberne til "show", "hide" eller "toggle":

Eksempel

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

Prøv det selv

jQuery animate() - Brug af køfunktion

Standardmæssigt tilbyder jQuery en køfunktion til animationer.

Dette betyder, at hvis du skriver flere animate() kald efter hinanden, vil jQuery oprette en "internt" kø med disse metodekald. Derefter køres disse animate-kald en efter en.

Eksempel 1

Skjul, hvis du ønsker at udføre forskellige animationer efter hinanden, skal vi bruge kødefunktionen:

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

Prøv det selv

Eksempel 2

Følgende eksempel flytter <div>-elementet til højre og øger tekststørrelsen:

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

Prøv det selv