animate-metoden i jQuery

Alle metodene vi gjennomgikk i de foregående leksjonene, er noe begrensede - de gjør akkurat det de er laget for. Hvis du trenger mer kontroll over animasjonen - bruk den universelle metoden animate.

Denne metoden tar imot et objekt som første parameter, der du skal sette nye verdier for CSS egenskapene du vil animere. Og som andre parameter - tiden det tar å utføre animasjonen.

La oss implementere denne metoden på følgende HTML-kode:

<button id="button">klikk på meg</button>
<div id="elem">tekst...</div>

La CSS se slik ut:

#elem {
	width: 150px;
	height: 150px;
	padding: 10px;
	border: 1px solid green;
}

La oss gjøre slik at ved å klikke på knappen krympes elementet til følgende størrelser: høyde - 50px, bredde - 100px:

$('#button').click(function() {
	$('#elem').animate({height: 50, width: 100}, 1000);
});

Hvis du angir verdien i dette formatet height: '+=50', vil animasjonen fungere slik: til den nåværende høyden vil det bli lagt til 50px (i vårt tilfelle) og elementet vil blir jevnt animert til den nye verdien. La oss se på et eksempel:

$('#button').click(function() {
	$('#elem').animate({height: '+=50', width: '+=50'}, 1000);
});

Se i jQuery-referansen for mer informasjon om animate-metoden.

animate

Det finnes et slikt oppsett:

<body>
	<div id="block"></div>
</body>

div {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	cursor: pointer;
	margin-bottom: 20px;
}

Gjør slik at når du klikker på div-en med #block, øker bredden til 200px på 1100ms.

Bruk oppsettet fra den første oppgaven. Gjør så at ved hvert klikk på div-en med #block, øker bredden med 200px og hvert slikt økning skal skje på 900ms.

Bruk oppsettet fra den første oppgaven. Gjør så at ved hvert klikk på div-en med #block, øker både bredden og høyden med 100px og hvert slikt økning skal skje på 950ms.

Bruk oppsettet fra den første oppgaven. Gjør så at ved hvert klikk på div-en med #block, flyttes den til høyre med 100px og hvert slik flytting skal skje på 700ms.