Maison > Article > interface Web > Comment obtenir un effet de fondu entrant et sortant dans jQuery

Comment obtenir un effet de fondu entrant et sortant dans jQuery

清浅original: 2019-02-12 14:26:013515parcourir

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

[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>

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

Remarque : cet article fait référence à

. Section jQuery Fade dans le Manuel du didacticiel jQuery

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!

Déclaration：

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

Article précédent：Comment utiliser la méthode de rechercheArticle suivant：Comment utiliser la méthode de recherche

Articles Liés

Voir plus