Maison > Article > interface Web > Quelles sont les fonctions d'animation jquery ?

Quelles sont les fonctions d'animation jquery ?

青灯夜游original: 2022-05-16 17:04:212866parcourir

Il existe 17 fonctions d'animation jquery : 1. animate(), utilisée pour appliquer une animation personnalisée à l'élément sélectionné ; 2. hide(), utilisée pour masquer l'élément sélectionné ; 3. show(), utilisée pour afficher l'élément sélectionné ; . Sélectionnez les éléments ; 4. fadeOut(), utilisé pour masquer les éléments en définissant l'opacité ; 5. fadeTo() et ainsi de suite.

L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 1.10.2, ordinateur Dell G3.

Fonctions d'animation jquery

Le tableau ci-dessous répertorie toutes les méthodes jQuery pour créer des effets d'animation.

Méthode	Description
animate()	Appliquer une animation "personnalisée" à l'élément sélectionné
clearQueue()	Supprimer toutes les fonctions de file d'attente de l'élément sélectionné (toujours en cours d'exécution)
delay()	Définit un délai
dequeue()	sur toutes les fonctions en file d'attente (pas encore en cours d'exécution) de l'élément sélectionné
dequeue()	supprime la fonction suivante en file d'attente puis exécute la fonction
fadeIn()	modifie progressivement l'opacité des éléments sélectionnés, de caché à visible
fadeOut()	modifie progressivement l'opacité des éléments sélectionnés, de visible à caché
fadeTo()	Changez progressivement l'élément sélectionné en l'opacité donnée
fadeToggle()	Basculez entre les méthodes fadeIn() et fadeOut()
finish()	Arrêtez et supprimez l'élément sélectionné et terminez toutes les animations de file d'attente
hide()	Masquer l'élément sélectionné
queue()	Afficher la fonction de file d'attente de l'élément sélectionné
show()	Afficher l'élément sélectionné
slideDown()	Faites glisser et affichez l'élément sélectionné en ajustant la hauteur
slideToggle()	slideUp() et slideDown() en basculant entre les méthodes
slideUp()	Faites glisser en ajustant la hauteur Masquer le élément sélectionné
stop()	Arrêtez l'animation en cours d'exécution sur l'élément sélectionné

toggle()🎜🎜hide() et show() en basculant entre les méthodes🎜🎜🎜🎜

Voici quelques fonctions d'animation couramment utilisées.

1. La méthode animate()

animate() effectue une animation personnalisée de l'ensemble de propriétés CSS.

Cette méthode fait passer un élément d'un état à un autre via les styles CSS. Les valeurs des propriétés CSS changent progressivement, vous permettant de créer des effets animés.

Seules les valeurs numériques peuvent être animées (telles que "margin:30px"). Les valeurs de chaîne ne peuvent pas être animées (telles que « background-color:red »).

Astuce : Veuillez utiliser "+=" ou "-=" pour créer des animations relatives.

Exemple : appliquer une animation à un élément en modifiant sa hauteur : la méthode

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("#btn1").click(function() {
					$("#box").animate({
						height: "300px"
					});
				});
				$("#btn2").click(function() {
					$("#box").animate({
						height: "100px"
					});
				});
			});
		</script>
	</head>
	<body>

		<button id="btn1">使用动画放大高度</button>
		<button id="btn2">重置高度</button>
		<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
		</div>

	</body>
</html>

Quelles sont les fonctions danimation jquery ?

2, hide(), show() et toggle()

hide() masque l'élément sélectionné.
show() affiche l'élément sélectionné
toggle() : basculer entre les méthodes hide() et show()

Exemple : masquer ou afficher l'élément

3, méthode slideUp(), slideDown() et slideToggle()

Quelles sont les fonctions danimation jquery ?

slideUp() : masquez l'élément sélectionné de manière coulissante.

Méthode slideDown() : Affiche l'élément sélectionné de manière coulissante.
Méthode slideToggle() : basculer entre les méthodes slideUp() et slideDown()

Exemple : masquer l'élément

en faisant glisser

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$(".btn1").click(function() {
					$("p").hide();
				});
				$(".btn2").click(function() {
					$("p").show();
				});
			});
		</script>
	</head>
	<body>

		<p>这是一个段落。</p>
		<button class="btn1">隐藏</button>
		<button class="btn2">显示</button>

	</body>
</html>
</html>

4, fadeIn() , fadeOut () et les méthodes fadeToggle()

Quelles sont les fonctions danimation jquery ?

fadeIn() modifient progressivement l'opacité de l'élément sélectionné de caché à visible (effet de fondu). La méthode

fadeOut() modifie progressivement l'opacité de l'élément sélectionné de visible à caché (effet de fondu).
fadeToggle() : basculer entre les méthodes fadeIn() et fadeOut()

Exemple : utilisez l'effet de fondu pour afficher l'élément

La méthode fadeTo() modifie progressivement l'opacité des éléments sélectionnés à une valeur spécifiée (effet de fondu).

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$(".btn1").click(function() {
					$("p").slideUp();
				});
				$(".btn2").click(function() {
					$("p").slideDown();
				});
			});
		</script>
	</head>
	<body>

		<p>这是一个段落。</p>
		<button class="btn1">上滑</button>
		<button class="btn2">下滑</button>

	</body>
</html>

....

Quelles sont les fonctions danimation jquery ?

【Apprentissage recommandé :

Tutoriel vidéo jQuery, Vidéo web front-end

】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

jquery css 字符串 margin background

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Jquery peut-il effacer le contenu du texte ?Article suivant：Jquery peut-il effacer le contenu du texte ?

Articles Liés

Voir plus