recherche

Maison  >  Article  >  interface Web  >  Comment obtenir un effet de fondu div dans jquery

Comment obtenir un effet de fondu div dans jquery

青灯夜游
青灯夜游original
2022-09-14 18:42:172001parcourir

Trois méthodes d'implémentation : 1. Utilisez fadeOut() pour modifier progressivement l'opacité de l'élément sélectionné, de visible à caché, la syntaxe est "element object.fadeIn (fondu en durée)" ; 2. Utilisez fadeTo() pour progressivement changer l'opacité de l'élément sélectionné. L'opacité de l'élément, la syntaxe est "element object.fadeTo(fade duration, 0)"; 3. Utilisez fadeToggle() pour changer progressivement l'opacité de l'élément sélectionné, la syntaxe est " élément object.fadeToggle (durée du fondu)".

Comment obtenir un effet de fondu div dans jquery

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.6.1, ordinateur Dell G3.

Dans jquery, il existe trois méthodes pour obtenir l'effet de fondu de div :

  • Méthode FadeOut()

  • Méthode FadeToggle()

  • Méthode FadeTo()

1. ) Méthode

fadeOut() modifie progressivement l'opacité de l'élément sélectionné de visible à caché (effet de fondu sortant).

Syntaxe :

$(selector).fadeOut(speed,easing,callback)
Paramètres Description
vitesse Facultatif. Spécifie la vitesse de l’effet de fondu.

Valeurs possibles :

  • ms
  • "lent"
  • "rapide"
easing Facultatif. Spécifie la vitesse de l'élément à différents points de l'animation. La valeur par défaut est "swing".

Valeurs possibles :

  • "swing" - se déplace lentement au début/à la fin, se déplace rapidement au milieu
  • "linéaire" - se déplace à une vitesse constante
Astuce : Plus de fonctions d'accélération sont disponibles dans l'extension.
rappel facultatif. Fonction de rappel à exécuter après l'exécution de la méthode fadeOut().

Exemple : 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("#div1").fadeOut();
					$("#div2").fadeOut("slow");
					$("#div3").fadeOut(3000);
				});
			});
		</script>
	</head>

	<body>
		<p>以下实例演示了 fadeOut()  使用了不同参数的效果。</p>
		<button>点击渐隐div元素。</button>
		<br><br>
		<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
		<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
		<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

	</body>
</html>

Comment obtenir un effet de fondu div dans jquery

2, méthode fadeTo()

la méthodefadeTo() permet un dégradé jusqu'à une opacité donnée (valeur comprise entre 0 et 1).

Syntaxe :

$(selector).fadeTo(speed,opacity,callback);

  • Le paramètre de vitesse requis spécifie la durée de l'effet. Il peut prendre les valeurs suivantes : "lent", "rapide" ou millisecondes. Le paramètre d'opacité requis dans la méthode

  • fadeTo() définit l'effet de fondu sur l'opacité donnée (valeur comprise entre 0 et 1).

  • Le paramètre de rappel facultatif est le nom de la fonction à exécuter une fois la fonction terminée.

Réglez simplement la valeur du paramètre opacityc sur 0 pour obtenir l'effet de fondu. 

$(document).ready(function() {
	$("button").click(function() {
		$("#div1").fadeTo("fast",0);
		$("#div2").fadeTo("slow",0);
		$("#div3").fadeTo(3000,0);
	});
});

Comment obtenir un effet de fondu div dans jquery

3. Méthode fadeToggle()

La méthode fadeToggle() peut basculer entre les méthodes fadeIn() et fadeOut().

  • fadeToggle() ajoute un effet de fondu à l'élément s'il est masqué.

  • fadeToggle() ajoute un effet de fondu à l'élément s'il est déjà affiché. 

$(document).ready(function() {
	$("button").click(function() {
		$("#div1").fadeToggle();
		$("#div2").fadeToggle("slow");
		$("#div3").fadeToggle(5000);
	});
});

Comment obtenir un effet de fondu div dans jquery

【Apprentissage recommandé : Tutoriel vidéo jQuery, front-end web】

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 回调函数 对象
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：A quoi sert la méthode jquery eq()Article suivant：A quoi sert la méthode jquery eq()

Articles Liés

Voir plus