Les méthodes de décoloration de jQuery expliquées

La décoloration est la propriété qui permet de manipuler l'opacité (transparence) des éléments HTML. JQuery propose quatre méthodes de décoloration qui vous permettent de modifier la transparence des éléments. Ces méthodes comprennent, fadein (), fadeout (), fadetoggle () et fadeto ().

Cet article explore les méthodes de décoloration de jQuery et sert les résultats d'apprentissage suivants.

• fonctionnement des méthodes de décoloration de jQuery
• Utilisation de méthodes de décoloration de jQuery

Comment utiliser les méthodes de décoloration de jQuery

Comme discuté précédemment, JQuery a quatre méthodes de décoloration et un aperçu approfondi de toutes ces méthodes est fournie ici.

Comment utiliser la méthode Fadein ()

La méthode fadein () affiche l'élément en augmentant l'opacité. La syntaxe de cette méthode est fournie ci-dessous:

$ (sélecteur).Fadein (vitesse, rappel);

La syntaxe a les instances suivantes

• sélecteur peut être n'importe quel élément ou peut se référer à la classe ou à l'identifiant de n'importe quel élément.
• vitesse peut être spécifié dans l'une ou l'autre des quatre valeurs: lent, moyen, rapide et millisecondes.
• rappeler est le paramètre facultatif et est exercé après l'exécution de la fonction avec succès.

Exemple

Le code fourni ci-dessous montre l'utilisation de la méthode jQuery Fadeout ().

jquery

$ (document).ready (function ()
$ (".fadein ").cliquez sur (fonction ()
$ (".lent").fadein ("lent");
$ (".rapide").fadein ("rapide");
$ (".Mili ").Fadein (2000);
);
);

Le code est décrit comme,

• .fondu fait référence à la classe de bouton et en cliquant sur le bouton, il se décolorera dans les paragraphes
• le .lent, .vite et .mili Les classes se réfèrent à trois paragraphes qui seront disparus à différentes vitesses

Note: La propriété d'affichage de l'élément (que vous allez disparaître) doit être définie sur aucune.

Sortir

Comme nous nous étendons et que la propriété d'affichage des paragraphes est définie sur aucun. Ainsi, les paragraphes seront cachés dans l'exécution de la page.

Après avoir cliqué sur le bouton, vous observerez que les paragraphes apparaîtront en fonction de la vitesse comme indiqué dans l'image ci-dessous.

Comment utiliser la méthode Fadeout ()

La méthode fadeout () fanme l'élément affiché en diminuant l'opacité de l'élément. La syntaxe de cette méthode est fournie ci-dessous:

$ (sélecteur).Fadeout (vitesse, rappel);

Exemple

Le code écrit ci-dessous montre l'utilisation de la méthode jQuery Fadeout ().

Le code ci-dessus est décrit comme,

• .disparaître La classe de bouton est utilisée qui disparaîtra les paragraphes
• le .lent, .vite et .mili Les noms de classe sont-ils définis pour les paragraphes et seront utilisés pour faire disparaître ainsi que pour le style

Sortir

Dans la méthode Fadeout (), les paragraphes seront affichés comme indiqué ci-dessous.

Après avoir cliqué sur le bouton, les paragraphes disparaîtront.

Comment utiliser la méthode fadeto ()

La méthode fadeto () fonctionne sur les principes de la méthode Fadeout (). Cependant, Fadeto () attise l'élément en utilisant une plage numérique (0-1). Cette gamme d'opacité définit le niveau d'opacité de l'élément, plus le nombre est élevé sera l'opacité et vice versa. La syntaxe est fournie ci-dessous:

$ (sélecteur).fadeto (vitesse, opacité, rappel);

Le paramètre d'opacité accepte la valeur 0 à 1.

Exemple

Le code fourni ci-dessous pratique la méthode fadeto ().

Le code est décrit comme,

• .fondu au se réfère à la classe de bouton
• le #min, #avg et #max représente les identifiants de trois balises div, et ces identifiants se réfèrent aux valeurs qui seront utilisées pour la méthode fadeto ()
• La valeur de décoloration varie de 0 à 1 dans les méthodes FADETO ()

Sortir

Avant d'appliquer la méthode fadeto ()

Après avoir appliqué la méthode Fadeto ()

À partir de la sortie ci-dessus, il est observé que le paragraphe ayant une valeur 0 a été lavé.

Comment utiliser la méthode fadetoggle ()

La méthode fadetoggle () se situe entre les méthodes Fadein () et Fadeout (). En utilisant fadetoggle (), vous pouvez afficher un élément caché et masquer un élément affiché. La syntaxe de cette méthode est:

$ (sélecteur).fadeto (vitesse, rappel);

Exemple

Le code fourni ci-dessous les fonctions pour utiliser la méthode fadetoggle ().

• .fadetoggle La classe se réfère au bouton
• le #lent, #Fast et #mili représente divers ID de div

Sortir

Avant de cliquer sur le bouton

Après avoir cliqué sur le bouton,

Il est conclu que, si l'élément est affiché, il sera caché après la méthode fadetoggle () (comme le fait Fadeout ()). De même, si l'élément est à l'état de fadeout (), alors le fadetoggle () agira comme une méthode Fadein ().

Conclusion

JQuery fournit diverses méthodes de décoloration qui incluent Fadein (), Fadeout (), Fadetoggle () et Fadeto () qui aident à la décoloration des éléments HTML. Ce guide fournit le fonctionnement et l'utilisation de chaque méthode de décoloration de jQuery. La méthode fadein () affiche l'élément s'il est caché tandis que le fadeout () cache l'élément. La méthode fadeto () s'estompe dans ou hors de la fonction du numéro d'opacité. Enfin, la méthode fadetoggle () fonctionne entre les méthodes Fadein () et Fadeout ().