jQuery effekt - animation

jQuery animate() metoden låter dig skapa anpassade animationer.

Effektvisning



jQuery

jQuery Animation - animate() metod

jQuery animate() används för att skapa anpassade animationer.

Syntaks:

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

Obligatorisk params Parametern definierar de CSS-egenskaper som används för att skapa animationen.

Valfritt speed Parametern specificerar varaktigheten av effekten. Det kan ta följande värden: "slow", "fast" eller millisekunder.

Valfritt callback Parametern är namnet på funktionen som körs efter att animationen är klar.

Nedan visas ett enkelt exempel på användning av animate() metoden; den flyttar <div>-elementet till vänster tills left-egenskapen är 250 pixlar:

Exempel

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

Prova själv

Tips:Som standard har alla HTML-element en statisk position och kan inte flyttas.

Om du vill manipulera positionen, kom ihåg att sätta elementets CSS positionsegenskap till relative, fixed eller absolute!

jQuery animate() - Manipulera flera egenskaper

Observera att du kan använda flera egenskaper samtidigt under genereringen av animationer:

Exempel

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

Prova själv

Tips:Kan man använda animate() för att manipulera alla CSS-egenskaper?

Ja, nästan! Men, kom ihåg ett viktigt faktum: när du använder animate() måste du använda CamelCase för alla egenskapsnamn, till exempel måste du använda paddingLeft istället för padding-left, marginRight istället för margin-right, och så vidare.

Samtidigt ingår inte färganimationer i den kärn jQuery-biblioteket.

Om du behöver skapa färganimationer måste du ladda ner Color Animations-pluginet från jQuery.com.

jQuery animate() - Använd relativa värden

Du kan också definiera relativa värden (dessa värden är relativa till elementets nuvarande värde). Du måste lägga till += eller -= framför värdet:

Exempel

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

Prova själv

jQuery animate() - Använd fördefinierade värden

Du kan också sätta animationens värde för egenskapen till "show", "hide" eller "toggle":

Exempel

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

Prova själv

jQuery animate() - Använd köfunktion

Som standard tillhandahåller jQuery en köfunktion för animationer.

Detta innebär att om du skriver flera animate()-anrop efter varandra, skapar jQuery en "inre" kö med dessa metodanrop. Därefter kör de dessa animate-anrop en efter en.

Exempel 1

Göm, om du vill köra olika animationer efter varandra, måste vi använda körfunktionen:

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

Prova själv

Exempel 2

Följande exempel flyttar <div>-elementet till höger och ökar textens storlek:

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

Prova själv