jQuery Effets - Fondu en entrée et en sortie

Grâce à jQuery, vous pouvez réaliser des effets d'apparition et de disparition d'éléments.

Démo d'effet

Cliquez ici pour cacher/afficher le panneau

Un instant d'été vaut un diamant, c'est pourquoi nous vous offrons un contenu d'apprentissage rapide et facile à comprendre.

Ici, vous pouvez obtenir toute l'information dont vous avez besoin de manière intuitive et pratique.

Exemple

jQuery fadeIn()
Démo de la méthode fadeIn() de jQuery.
jQuery fadeOut()
Démo de la méthode fadeOut() de jQuery.
jQuery fadeToggle()
Démo de la méthode fadeToggle() de jQuery.
jQuery fadeTo()
Démo de la méthode fadeTo() de jQuery.

Méthodes de fondu de jQuery

Grâce à jQuery, vous pouvez réaliser des effets d'apparition et de disparition d'éléments.

jQuery possède les quatre méthodes fade suivantes :

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

La méthode fadeIn() de jQuery

La méthode fadeIn() de jQuery est utilisée pour faire apparaître un élément caché.

Syntaxe :

$(selector).fadeIn(speed,callback);

Optionnel speed Le paramètre détermine la durée de l'effet. Il peut prendre les valeurs suivantes : "slow", "fast" ou en millisecondes.

Optionnel callback Le paramètre est le nom de la fonction à exécuter après la fin du fondu.

L'exemple suivant montre la méthode fadeIn() avec différents paramètres :

Exemple

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

Essayez-le vous-même

La méthode fadeOut() de jQuery

La méthode fadeOut() de jQuery est utilisée pour faire disparaître un élément visible.

Syntaxe :

$(selector.fadeOut(speed,callback);

Optionnel speed Le paramètre détermine la durée de l'effet. Il peut prendre les valeurs suivantes : "slow", "fast" ou en millisecondes.

Optionnel callback Le paramètre est le nom de la fonction à exécuter après la fin du fondu.

Les exemples suivants montrent la méthode fadeOut() avec différents paramètres :

Exemple

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

Essayez-le vous-même

Méthode fadeToggle() de jQuery

La méthode fadeToggle() de jQuery peut basculer entre fadeIn() et fadeOut().

Si l'élément est déjà fondu, fadeToggle() ajoutera un effet de fondu à l'élément.

Si l'élément est déjà fondu, fadeToggle() ajoutera un effet de fondu à l'élément.

Syntaxe :

$(selector).fadeToggle(speed,callback);

Optionnel speed Le paramètre détermine la durée de l'effet. Il peut prendre les valeurs suivantes : "slow", "fast" ou en millisecondes.

Optionnel callback Le paramètre est le nom de la fonction à exécuter après la fin du fondu.

Les exemples suivants montrent la méthode fadeToggle() avec différents paramètres :

Exemple

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

Essayez-le vous-même

Méthode fadeTo() de jQuery

La méthode fadeTo() de jQuery permet de passer progressivement à l'opacité donnée (valeur comprise entre 0 et 1).

Syntaxe :

$(selector).fadeTo(speed,opacity,callback);

Le paramètre obligatoire speed détermine la durée de l'effet. Il peut prendre les valeurs suivantes : "slow", "fast" ou en millisecondes.

Le paramètre obligatoire opacity dans la méthode fadeTo() règle l'effet d'opacité (valeur comprise entre 0 et 1).

Le paramètre optionnel callback est le nom de la fonction à exécuter après la fin de l'exécution de la fonction.

Les exemples suivants montrent la méthode fadeTo() avec différents paramètres :

Exemple

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

Essayez-le vous-même

Manual de effets jQuery

Pour consulter tous les effets jQuery, veuillez visiter notre Manual de effets jQuery。