Die animate-Methode in jQuery

Alle Methoden, die wir in den vorherigen Lektionen behandelt haben, sind etwas eingeschränkt - sie tun genau das, wofür sie geschaffen wurden. Wenn Sie mehr Kontrolle über die Animation benötigen, verwenden Sie die universelle Methode animate.

Als ersten Parameter akzeptiert diese Methode ein Objekt, in dem Sie die neuen Werte der CSS Eigenschaften festlegen, die Sie animieren möchten. Und als zweiten Parameter - die Ausführungszeit der Animation.

Lassen Sie uns diese Methode mit dem folgenden HTML-Code implementieren:

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

Lassen Sie das CSS wie folgt aussehen:

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

Lassen Sie uns bewirken, dass sich das Element beim Klicken auf den Button auf folgende Größen zusammenzieht: Höhe - 50px, Breite - 100px:

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

Wenn Sie den Wert in diesem Format angeben height: '+=50', dann funktioniert die Animation wie folgt: Zum aktuellen Höhenwert werden 50px (in unserem Fall) addiert und das Element wird fließend zum neuen Wert animiert. Sehen wir uns ein Beispiel an:

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

Weitere Details zur Methode animate finden Sie im jQuery-Nachschlagewerk.

animate

Es gibt folgendes Markup:

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

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

Sorgen Sie dafür, dass sich beim Klicken auf das Div mit #block seine Breite auf 200px vergrößert, und dies innerhalb von 1100ms.

Verwenden Sie das Markup aus der ersten Aufgabe. Sorgen Sie dafür, dass bei jedem Klicken auf das Div mit #block seine Breite sich um 200px vergrößert und jede solche Vergrößerung innerhalb von 900ms erfolgt.

Verwenden Sie das Markup aus der ersten Aufgabe. Sorgen Sie dafür, dass bei jedem Klicken auf das Div mit #block seine Breite und seine Höhe sich um 100px vergrößern und jede solche Vergrößerung innerhalb von 950ms erfolgt.

Verwenden Sie das Markup aus der ersten Aufgabe. Sorgen Sie dafür, dass bei jedem Klicken auf das Div mit #block, es sich um 100px nach rechts bewegt und jede solche Bewegung innerhalb von 700ms erfolgt.