Derniers tutoriels de développement web
 

jQuery Effets - Fading


Avec jQuery, vous pouvez disparaître des éléments dans et hors de la visibilité.

Cliquez pour fade in / out panel

Parce que le temps est précieux, nous offrons un apprentissage rapide et facile.

À w3ii , vous pouvez tout ce que vous avez besoin d'apprendre, dans un format accessible et maniable étudier.


Exemples

jQuery fadeIn()
Démontre l'jQuery fadeIn() méthode.

jQuery fadeOut()
Démontre l'jQuery fadeOut() méthode.

jQuery fadeToggle()
Démontre l'jQuery fadeToggle() méthode.

jQuery fadeTo()
Démontre l'jQuery fadeTo() méthode.


jQuery Méthodes de Fading

Avec jQuery, vous pouvez disparaître un élément dans et hors de la visibilité.

jQuery a les méthodes de fondu suivantes:

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

jQuery fadeIn() Méthode

Le jQuery fadeIn() méthode est utilisée pour estomper dans un élément caché.

Syntaxe:

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

Le paramètre de vitesse optionnel spécifie la durée de l'effet. Il peut prendre les valeurs suivantes: "slow", "fast" , ou en millisecondes.

Le paramètre de rappel optionnel est une fonction à exécuter après la disparition complète.

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

Exemple

$("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
});
Essayez - le vous - même »

jQuery fadeOut() Méthode

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

Syntaxe:

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

Le paramètre de vitesse optionnel spécifie la durée de l'effet. Il peut prendre les valeurs suivantes: "slow", "fast" , ou en millisecondes.

Le paramètre de rappel optionnel est une fonction à exécuter après la disparition complète.

L'exemple suivant illustre le fadeOut() méthode avec différents paramètres:

Exemple

$("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
});
Essayez - le vous - même »

jQuery fadeToggle() Méthode

Le jQuery fadeToggle() méthode permet de basculer entre le fadeIn() et fadeOut() méthodes.

Si les éléments sont fanées out, fadeToggle() va les estomper dans.

Si les éléments sont fanées dans, fadeToggle() va les estomper.

Syntaxe:

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

Le paramètre de vitesse optionnel spécifie la durée de l'effet. Il peut prendre les valeurs suivantes: "slow", "fast" , ou en millisecondes.

Le paramètre de rappel optionnel est une fonction à exécuter après la disparition complète.

L'exemple suivant illustre le fadeToggle() méthode avec différents paramètres:

Exemple

$("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
});
Essayez - le vous - même »

jQuery fadeTo() Méthode

Le jQuery fadeTo() méthode permet la décoloration à une opacité donnée (valeur entre 0 et 1).

Syntaxe:

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

Le paramètre de vitesse requise spécifie la durée de l'effet. Il peut prendre les valeurs suivantes: "slow", "fast" , ou en millisecondes.

Le paramètre d'opacité requise dans le fadeTo() méthode spécifie la décoloration à une opacité donnée (valeur entre 0 et 1).

Le paramètre de rappel optionnel est une fonction à exécuter après la fonction complète.

L'exemple suivant illustre le fadeTo() méthode 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 »

Testez-vous avec des exercices!

Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 »


jQuery Effets de référence

Pour un aperçu complet de tous les effets jQuery, s'il vous plaît aller à notre Effet Référence jQuery .