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

名称	说明	举例
fadeIn( speed, [callback] )	通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。	用600毫秒缓慢的将段落淡入: `$("p").fadeIn("slow");`
fadeOut( speed, [callback] )	通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。	用600毫秒缓慢的将段落淡出: `$("p").fadeOut("slow");`
fadeTo(speed, opacity, [callback])	把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。	用600毫秒缓慢的将段落的透明度调整到0.66，大约2/3的可见度: `$("p").fadeTo("slow", 0.66);$("p").fadeTo("slow", 0.66);`

Nom<🎜>

<🎜>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 grâce 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>演示带有不同参数的 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>

QQ截图20161026101329.png

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

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>演示带有不同参数的 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>

QQ截图20161026101513.png

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

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>演示带有不同参数的 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>演示带有不同参数的 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>

            //设置弹出层的透明度
               $("#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.

.section suivante

nouveau fichier

<!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>演示带有不同参数的 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>

soumettre Réinitialiser le code

Opération automatique

Plein écran