Comment obtenir un effet de fondu entrant et sortant dans jQuery-js tutoriel-php.cn

Comment obtenir un effet de fondu entrant et sortant dans jQuery

清浅

Libérer： 2019-02-12 14:26:01

original

3534 Les gens l'ont consulté

Il existe quatre méthodes dans jQuery : fadeIn(), fadeOut(), fadeToggle() et fadeTo(). Grâce à ces quatre méthodes, vous pouvez obtenir l'effet de fondu d'entrée et de sortie

Ce que je veux partager aujourd'hui, c'est comment l'utilisation de jQuery pour obtenir l'effet de fondu d'entrée et de sortie a un certain effet de référence. J'espère que cela sera utile à tout le monde

Comment obtenir un effet de fondu entrant et sortant dans jQuery

[Recommandation du didacticiel :

Tutoriel jQuery]jQuery a quatre méthodes de fondu, à savoir fadeIn(), fadeOut(), fadeToggle(), fadeTo( ). Ensuite, je les présenterai en détail dans l'article. Comment obtenir l'effet de fondu entrant et sortant avec cette méthode

La méthode fadeIn()

est principalement utilisé pour faire apparaître des éléments cachés. Il possède deux paramètres :

vitesse : Indique la durée de l'effet, qui peut être "lente", "rapide" ou une valeur de temps personnalisée. Il s'agit d'un paramètre facultatif

callback : indique le nom de la fonction exécutée une fois l'effet de fondu terminé

méthode fadeOut()

est principalement utilisé pour faire disparaître l'élément visible, sa valeur de paramètre est la même que la valeur de fadeIn

Méthode fadeToggle()

Cette méthode peut basculer entre fadeIn () et méthodes fadeOut()

Si l'élément est apparu en fondu, fadeToggle() ajoutera un effet de fondu entrant à l'élément

Si l'élément est apparu en fondu, fadeToggle() le fera ajouter un effet de fondu à l'élément

méthode fadeTo()

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

En plus des fonctions de vitesse et de rappel, la méthode fadeTo De plus, il existe un paramètre d'opacité supplémentaire requis, qui vise à définir l'opacité de l'effet de fondu d'entrée et de sortie

Exemple partage :

Rendu :

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #img{
      width:300px;
      height:200px;
      position: absolute;
      top:40px;
    }
    button{
      position: absolute;
      top:10px;
    }
  </style>
</head>
<body>
  <script src="./jquery/jquery-1.12.4.js"></script>
  <script>
  $(document).ready(function(){
  $("button").click(function(){
   $("#img").fadeToggle(3000).fadeTo(0.5);
  });
});
</script>
<button>点击</button>
<img  src="./images/22.jpg" id="img" alt="Comment obtenir un effet de fondu entrant et sortant dans jQuery" >
</body>
</html>

Copier après la connexion

Résumé : Ce qui précède est l'intégralité du contenu de ce J'espère que cet article pourra vous aider à apprendre comment obtenir l'effet de fondu d'entrée et de sortie via jQuery Comment obtenir un effet de fondu entrant et sortant dans jQuery