Comment obtenir un effet de fondu div dans jquery-Questions et réponses frontales-php.cn

Comment obtenir un effet de fondu div dans jquery

青灯夜游

Libérer： 2022-09-14 18:42:17

original

2044 Les gens l'ont consulté

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)

Copier après la connexion

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().

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>

Copier après la connexion

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);

Copier après la connexion

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);
	});
});

Copier après la connexion

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);
	});
});

Copier après la connexion

Comment obtenir un effet de fondu div dans jquery