La méthode animate dans jQuery

Toutes les méthodes que nous avons examinées dans les leçons précédentes sont quelque peu limitées - elles font exactement ce pour quoi elles ont été conçues. Si vous avez besoin de plus de contrôle sur l'animation - utilisez la méthode universelle animate.

Le premier paramètre de cette méthode accepte un objet dans lequel vous devez définir les nouvelles valeurs des propriétés CSS que vous souhaitez animer. Et le deuxième paramètre - la durée d'exécution de l'animation.

Implémentons cette méthode sur le code HTML suivant :

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

Supposons que le CSS ressemble à ceci :

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

Faisons en sorte qu'en cliquant sur le bouton, l'élément se réduise aux dimensions suivantes : hauteur - 50px, largeur - 100px :

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

Si vous spécifiez la valeur dans ce format height: '+=50', alors l'animation fonctionnera comme suit : à la valeur actuelle de la hauteur sera ajoutée 50px (dans notre cas) et l'élément sera animé en douceur vers la nouvelle valeur. Regardons sur un exemple :

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

Pour plus de détails sur la méthode animate, consultez le guide de référence jQuery.

animate

Il y a un code HTML comme ceci :

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

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

Faites en sorte que lors du clic sur la div avec l'id #block sa largeur augmente jusqu'à 200px en 1100ms.

Utilisez le code de la première tâche. Faites en sorte qu'à chaque clic sur la div avec l'id #block sa largeur augmente de 200px et que chaque augmentation se produise en 900ms.

Utilisez le code de la première tâche. Faites en sorte qu'à chaque clic sur la div avec l'id #block sa largeur et sa hauteur augmentent de 100px et que chaque augmentation se produise en 950ms.

Utilisez le code de la première tâche. Faites en sorte qu'à chaque clic sur la div avec l'id #block, elle se déplace vers la droite de 100px et que chaque déplacement se produise en 700ms.