Metoden animate i jQuery

Alle de metoder, som vi gennemgik i de foregående lektioner, er noget begrænsede - de gør præcis det, de er skabt til. Hvis du har brug for mere kontrol over animationen - brug den universelle metode animate.

Som første parameter accepterer denne metode et objekt, hvor du skal angive de nye værdier for CSS egenskaber, som du ønsker at animere. Og som anden parameter - udførelsestiden for animationen.

Lad os implementere denne metode på følgende HTML-kode:

<button id="button">click me</button>
<div id="elem">text...</div>

Lad CSS se sådan ud:

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

Lad os gøre så, at ved klik på knappen skrumper elementet til følgende størrelser: højde - 50px, bredde - 100px:

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

Hvis du angiver værdien i dette format height: '+=50', så vil animationen fungere sådan: til den nuværende højdeværdi vil der blive lagt 50px (i vores tilfælde) og elementet vil blive animeret glat til den nye værdi. Lad os se et eksempel:

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

Se mere om metoden animate i jQuery-referencemanualen.

animate

Der er følgende opmærkning:

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

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

Gør så, ved klik på div'en med #block, øges dens bredde til 200px over 1100ms.

Brug opmærkningen fra den første opgave. Gør så, at ved hvert klik på div'en med #block, øges dens bredde med 200px og hver sådan forøgelse skal ske over 900px.

Brug opmærkningen fra den første opgave. Gør så, at ved hvert klik på div'en med #block, øges dens bredde og højde med 100px og hver sådan forøgelse skal ske over 950px.

Brug opmærkningen fra den første opgave. Gør så, at ved hvert klik på div'en med #block, flyttes den til højre med 100px og hver sådan flytning skal ske over 700px.