Maison > interface Web > Questions et réponses frontales > Quelle méthode est le fondu entrant jquery ?

Quelle méthode est le fondu entrant jquery ?

青灯夜游
Libérer: 2022-06-07 17:39:29
original
2207 Les gens l'ont consulté

Il existe trois façons d'effectuer un fondu entrant : 1. fadeIn(), qui peut faire apparaître des éléments cachés, la syntaxe est "element object.fadeIn (fondu en durée)" ; 2. fadeTo(), la syntaxe est "element object.fadeIn (fondu en durée)" ; .fadeTo(duration, 1)"; 3. fadeToggle(), syntaxe "object.fadeToggle(duration)".

Quelle méthode est le fondu entrant jquery ?

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

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

  • Méthode fadeIn()

  • Méthode fadeToggle()

  • Méthode fadeTo()

1, fadeIn( ) La méthode

fadeIn() est utilisée pour faire apparaître en fondu les éléments cachés.

Syntaxe :

$(selector).fadeIn(speed,callback);
Copier après la connexion
  • Le paramètre facultatif de vitesse spécifie la durée de l'effet. Il peut prendre les valeurs suivantes : "lent", "rapide" ou millisecondes. .

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

Exemple :

<!DOCTYPE html>
<html>

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

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

	</body>
</html>
Copier après la connexion

Quelle méthode est le fondu entrant jquery ?

2, méthode fadeTo()

la méthodefadeTo() permet d'effectuer un fondu 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 1 pour obtenir l'effet de fondu.

$(document).ready(function() {
	$("button").click(function() {
		$("#div1").fadeTo("fast",1);
		$("#div2").fadeTo("slow",1);
		$("#div3").fadeTo(5000,1);
	});
});
Copier après la connexion

Quelle méthode est le fondu entrant 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

Quelle méthode est le fondu entrant 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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal