Fonction d'animation de fondu entrant et sortant jQuery
La fonction de fondu fournit uniquement l'effet de dégradé de transparence.
Fonction de fondu Fondu
| Description< ??> | Exemple | ||||||||||||
| fadeIn(vitesse, [callback]) | Fusionnez tous les éléments correspondants via des changements d'opacité et déclenchez éventuellement une fonction de rappel une fois l'animation terminée. Cette animation ajuste uniquement l'opacité de l'élément, ce qui signifie que la hauteur et la largeur de tous les éléments correspondants ne changeront pas. | Fusionnez lentement le paragraphe pendant 600 millisecondes?:
$("p").fadeIn("lent"); | ||||||||||||
| < ??>fadeOut( vitesse, [callback] ) | Estompe tous les éléments correspondants grace aux changements d'opacité et déclenche éventuellement une fonction de rappel une fois l'animation terminée. | Fusionnez lentement le paragraphe en utilisant 600 millisecondes?:
$("p").fadeOut("lent"); | ||||||||||||
| < ??>fadeTo(vitesse, opacité, [rappel]) | Ajuste progressivement l'opacité de tous les éléments correspondants à l'opacité spécifiée et déclenche éventuellement une fonction de rappel une fois l'animation terminée. | Ajustez lentement la transparence du paragraphe à 0,66 sur 600 millisecondes, soit environ 2/3 de la visibilité?:
$("p").fadeTo("lent", 0.66);$("p").fadeTo("lent", 0.66); |
Explication
Les deux fonctions fadeIn et fadeOut correspondent à show et hide, qui servent à afficher et masquer des objets avec un effet dégradé de transparence :
$("#divPop").fadeIn(200);
$("#divPop").fadeOut("fast");1 . Fondu entrant Fondu sortant
1 Méthode jQuery fadeIn()
jQuery fadeIn() est utilisé pour fondre. dans les éléments cachés.
語法：$(selector).fadeIn(speed,callback);
Le paramètre optionnel speed précise 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é.
L'exemple suivant illustre la méthode fadeIn() avec différents paramètres?:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>演示帶有不同參數(shù)的 fadeIn() 方法。</p>
<button>點擊這里，使三個矩形淡入</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>
2. Méthode jQuery fadeOut()
La méthode jQuery fadeOut() est utilisée pour faire dispara?tre les éléments visibles.
語法：$(selector).fadeOut(speed,callback);
Le paramètre optionnel speed précise 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é.
L'exemple suivant montre la méthode fadeOut() avec différents paramètres?:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
</head>
<body>
<p>演示帶有不同參數(shù)的 fadeOut() 方法。</p>
<button>點擊這里，使三個矩形淡出</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>
Méthode jQuery fadeToggle()
La méthode jQuery fadeToggle() peut basculer entre les méthodes fadeIn() et fadeOut(). Si l'élément est déjà fondu, fadeToggle() ajoute un effet de fondu entrant à l'élément. Si l'élément est déjà apparu en fondu, fadeToggle() ajoute un effet de fondu sortant à l'élément.
語法：$(selector).fadeToggle(speed,callback);
Le paramètre optionnel speed précise 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é.
L'exemple suivant montre la méthode fadeToggle() avec différents paramètres?:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>演示帶有不同參數(shù)的 fadeToggle() 方法。</p>
<button>點擊這里，使三個矩形淡入淡出</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>
</body>
</html>4. Méthode jQuery fadeTo()
La méthode jQuery fadeTo() permet de donner des dégradés. Une certaine opacité (valeur comprise entre 0 et 1).
語法：$(selector).fadeTo(speed,opacity,callback);
Le paramètre de vitesse requis précise 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 (une 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.
L'exemple suivant illustre la méthode fadeTo() avec différents paramètres?:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
});
</script>
</head>
<body>
<p>演示帶有不同參數(shù)的 fadeTo() 方法。</p>
<button>點擊這里，使三個矩形淡出</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> //設(shè)置彈出層的透明度
$("#divPop").fadeTo(0, 0.66); //讓彈出層透明顯示
if ($("#divPop").css("display") == "none")
{
$("#divPop").fadeIn(speed);
} else
{
$("#divPop").fadeOut(speed);
}Après avoir défini la transparence du calque contextuel avec fadeTo, l'utilisation de fadeIn entra?nera l'affichage et le fondu de l'objet au paramètre fadeTo. Transparence.
Ce qui est introduit ici concerne uniquement les caractéristiques des deux fonctions. Dans les applications réelles, elles ne doivent pas nécessairement être utilisées ensemble.
