Effets jQuery - Fondu
Avec jQuery, vous pouvez masquer des éléments dans et hors de la visibilité.
Cliquez pour faire apparaître/sortir le panneau
Parce que le temps est précieux, nous offrons un apprentissage rapide et facile.
Chez W3Schools, vous pouvez étudier tout ce dont vous avez besoin pour apprendre, dans un format accessible et pratique.
Exemples
Démontre la méthode jQuery fadeIn().
Démontre la méthode jQuery fadeOut().
Démontre la méthode jQuery fadeToggle().
Démontre la méthode jQuery fadeTo().
Méthodes de fondu jQuery
Avec jQuery, vous pouvez masquer un élément dans et hors de la visibilité.
jQuery a les méthodes de fondu suivantes :
fadeIn()fadeOut()fadeToggle()fadeTo()
Méthode jQuery fadeIn()
La méthode jQuery fadeIn()est utilisée pour fondre un élément masqué.
Syntaxe:
$(selector).fadeIn(speed,callback);
Le paramètre optionnel speed spécifie la durée de l'effet. Il peut prendre les valeurs suivantes : "slow", "fast" ou millisecondes.
Le paramètre de rappel facultatif est une fonction à exécuter une fois le fondu terminé.
L'exemple suivant illustre la fadeIn()méthode avec différents paramètres :
Exemple
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
Méthode jQuery fadeOut()
La méthode jQuery fadeOut()est utilisée pour faire disparaître un élément visible.
Syntaxe:
$(selector).fadeOut(speed,callback);
Le paramètre optionnel speed spécifie la durée de l'effet. Il peut prendre les valeurs suivantes : "slow", "fast" ou millisecondes.
Le paramètre de rappel facultatif est une fonction à exécuter une fois le fondu terminé.
L'exemple suivant illustre la fadeOut()méthode avec différents paramètres :
Exemple
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
Méthode jQuery fadeToggle()
La méthode jQuery fadeToggle()bascule entre les
méthodes fadeIn()et .fadeOut()
Si les éléments sont estompés, les fadeToggle()apparaîtra en fondu.
Si les éléments sont fondus, fadeToggle()les estompera.
Syntaxe:
$(selector).fadeToggle(speed,callback);
Le paramètre optionnel speed spécifie la durée de l'effet. Il peut prendre les valeurs suivantes : "slow", "fast" ou millisecondes.
Le paramètre de rappel facultatif est une fonction à exécuter une fois le fondu terminé.
L'exemple suivant illustre la fadeToggle()méthode avec différents paramètres :
Exemple
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
Méthode jQuery fadeTo()
La méthode jQuery fadeTo()permet un fondu à une opacité donnée (valeur entre 0 et 1).
Syntaxe:
$(selector).fadeTo(speed,opacity,callback);
Le paramètre de vitesse requis spécifie la durée de l'effet. Il peut prendre les valeurs suivantes : "slow", "fast" ou millisecondes.
Le paramètre d'opacité requis dans la fadeTo()méthode spécifie le fondu à une opacité donnée (valeur comprise entre 0 et 1).
Le paramètre de rappel facultatif est une fonction à exécuter une fois la fonction terminée.
L'exemple suivant illustre la 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);
});
Exercices jQuery
Référence des effets jQuery
Pour un aperçu complet de tous les effets jQuery, veuillez consulter notre Référence des effets jQuery .