Metoden animate i jQuery

Alla metoder som vi gick igenom i de tidigare lektionerna är något begränsade - de gör exakt det de är skapade för. Om du behöver mer kontroll över animationen - använd den universella metoden animate.

Den första parametern för denna metod tar ett objekt, där du ska ange de nya värdena för CSS -egenskaper som du vill animera. Och den andra parametern - tiden för animationens utförande.

Låt oss implementera denna metod på följande HTML-kod:

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

Låt CSS se ut så här:

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

Låt oss göra så att när knappen klickas komprimeras elementet till följande dimensioner: höjd - 50px, bredd - 100px:

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

Om du anger värdet i formatet height: '+=50', kommer animationen att fungera så här: till elementets nuvarande höjd kommer att läggas till 50px (i vårt fall) och elementet kommer att animeras mjukt till det nya värdet. Låt oss titta på ett exempel:

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

För mer information om metoden animate, se jQuery-referensguiden.

animate

Det finns en sådan här layout:

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

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

Gör så att när du klickar på div:en med #block ökar dess bredd till 200px på 1100ms.

Använd layouten från den första uppgiften. Gör så att varje gång du klickar på div:en med #block ökar dess bredd med 200px och varje sådan ökning ska ske på 900px.

Använd layouten från den första uppgiften. Gör så att varje gång du klickar på div:en med #block ökar dess bredd och höjd med 100px och varje sådan ökning ska ske på 950px.

Använd layouten från den första uppgiften. Gör så att varje gång du klickar på div:en med #block, flyttas den 100px åt höger och varje sådan förflyttning ska ske på 700px.