Cet article expliquera l'implémentation pratique de la méthode fadeOut() de jQuery pour la création d'un effet de fondu sortant en douceur.
Comment créer des effets de fondu fluides à l'aide de la méthode fadeOut() de jQuery ?
' de jQuery disparaître() ' La méthode masque progressivement l'élément sélectionné en diminuant son opacité. Cette méthode change l’état de l’élément sélectionné de visible à caché. L'élément masqué ne s'affiche pas sur la page Web jusqu'à ce que l'utilisateur l'affiche à nouveau à l'aide du ' fonduIn() ' méthode.
Syntaxe
$ ( sélecteur ) . disparaître ( vitesse, assouplissement, rappel ) ;
La syntaxe ci-dessus prend en charge les paramètres facultatifs suivants pour personnaliser l'effet de fondu sortant :
- vitesse: Il spécifie la vitesse de l'effet de fondu en millisecondes. Par défaut, sa valeur est « 400 ms ». De plus, il prend également en charge deux valeurs intégrées « lente » et « rapide ».
- assouplissement : Il montre la vitesse d'animation de fondu à différents points. Par défaut, sa valeur est « swing (plus lent au début/fin, et lent au milieu) ». De plus, il fonctionne également sur le « linéaire (vitesse constante dans l'animation en fondu) ».
- rappeler: Il définit une fonction définie par l'utilisateur qui s'exécute après avoir terminé l'animation de fondu pour effectuer la tâche définie.
Utilisons pratiquement la méthode définie ci-dessus.
Code HTML
Avant de passer à la méthode « fadeOut() », regardez le code HTML suivant qui crée un exemple d'élément « div » sur lequel l'effet de fondu sortant sera effectué :
< bouton > disparaître ( Cacher Élément ) bouton >< br >< br >< identifiant div = 'maDiv' style = 'hauteur : 80 px ; largeur : 300 px ; bordure : 2 px noir uni ; marge : auto ; alignement du texte : centre' >
< h2 > Bienvenue sur Linuxhint h2 >
div >
Dans les lignes de code ci-dessus :
- Le '
La balise ' ajoute un élément bouton. - Le ' ' La balise crée un élément div ayant un identifiant « myDiv » et est stylisée à l'aide des propriétés de style suivantes (hauteur, largeur, bordure, marge, alignement du texte).
- À l'intérieur du div, le ' La balise « spécifie le premier élément de sous-titre du niveau 2.
Maintenant, commencez par le premier exemple.
Exemple 1 : créer des effets de fondu enchaîné fluides avec la valeur par défaut de fadeOut()
Le premier exemple masque l'élément div correspondant en utilisant la méthode « fadeOut() » avec sa valeur par défaut « 400 ms » :
< scénario >
$ ( document ) . prêt ( fonction ( ) {
$ ( 'bouton' ) . Cliquez sur ( fonction ( ) {
$ ( '#maDiv' ) . disparaître ( ) ;
} ) ;
} ) ;
scénario >Dans les lignes de code ci-dessus :
- Premièrement, le « prêt() ' La méthode exécute les fonctions données lorsque le document HTML/DOM actuel est chargé.
- Ensuite, le « Cliquez sur() ' La méthode exécute la fonction liée lors d'un clic sur le bouton lorsque son sélecteur de ' bouton ' associé est cliqué.
- Après cela, le « disparaître() ' La méthode masque l'élément div accédé dont l'identifiant est 'myDiv' en 400 ms, c'est-à-dire la valeur par défaut.
Sortir
On observe que le clic sur le bouton donné fait disparaître progressivement l'élément div en « 400 ms ».
Exemple 2 : Créer des effets de fondu enchaîné fluides avec le paramètre « vitesse » fadeOut()
Cet exemple utilise la méthode « fadeOut() » avec les valeurs intégrées (lent/rapide) du paramètre « speed » :
< scénario >
$ ( document ) . prêt ( fonction ( ) {
$ ( 'bouton' ) . Cliquez sur ( fonction ( ) {
$ ( '#maDiv' ) . disparaître ( 'lent' ) ;
} ) ;
} ) ;
scénario >Maintenant le ' disparaître() ' La méthode passe le ' lent ' comme paramètre pour créer en douceur l'effet de fondu, c'est-à-dire changer l'état de l'élément div sélectionné de visible à caché.
Sortir
On peut voir que l'élément div sélectionné se cache lentement lorsque vous cliquez sur le bouton.
Exemple 3 : Créer des effets de fondu enchaîné fluides avec le paramètre « duration » fadeOut()
Cet exemple applique la méthode « fadeOut() » avec un nombre spécifique de millisecondes comme paramètre de durée :
< scénario >
$ ( document ) . prêt ( fonction ( ) {
$ ( 'bouton' ) . Cliquez sur ( fonction ( ) {
$ ( '#maDiv' ) . disparaître ( 6000 ) ;
} ) ;
} ) ;
scénario >Désormais, la méthode «fadeOut()» utilise le nombre de millisecondes spécifié pour masquer l'élément correspondant pendant la durée donnée.
Sortir
La sortie ci-dessus masque les modifications de l'élément div donné lors d'un clic sur un bouton dans un intervalle de temps donné.
Exemple 4 : Créer des effets de fondu enchaîné fluides avec la fonction de « rappel » fadeOut()
Cet exemple exécute une fonction de rappel à la fin de l'effet de fondu via la méthode « fadeOut() » :
< scénario >
$ ( document ) . prêt ( fonction ( ) {
$ ( 'bouton' ) . Cliquez sur ( fonction ( ) {
$ ( '#maDiv' ) . disparaître ( 4000 , fonction ( ) {
console. enregistrer ( 'L'élément div donné est masqué avec succès !' )
} ) ;
} ) ;
} ) ;
scénario >Dans le bloc de code indiqué :
- Le ' disparaître() ' La méthode fait disparaître l'élément div correspondant en un nombre spécifique de millisecondes, puis exécute la fonction ' rappel ' fournie.
- À l'intérieur de ' rappeler ' fonction, le ' console.log() ' La méthode est appliquée pour afficher l'instruction spécifiée une fois l'effet de 'fondu sortant' terminé.
Sortir
On voit que la « console » affiche une instruction définie dans la fonction de rappel après avoir masqué l'élément div donné.
Exemple 5 : Créer des effets de fondu enchaîné fluides avec le paramètre « easing » fadeOut()
Cet exemple applique la méthode « fadeOut() » avec les valeurs possibles du paramètre « easing » :
< scénario >
$ ( document ) . prêt ( fonction ( ) {
$ ( 'bouton' ) . Cliquez sur ( fonction ( ) {
$ ( '#maDiv' ) . disparaître ( 4000 , 'linéaire' ) ;
} ) ;
} ) ;
scénario >Maintenant le ' disparaître() ' La méthode effectue l'effet de fondu en un nombre spécifique de millisecondes à une vitesse constante en raison du ' linéaire ' valeur.
Sortir
La sortie change l’état de l’élément donné de visible à caché à une vitesse constante. C'est tout pour implémenter l'effet « fondu » sur l'élément.
Conclusion
Pour créer un effet de fondu fluide à l'aide de ' disparaître() ', l'utilisateur n'a besoin d'aucun paramètre supplémentaire. Cette méthode s'efface, c'est-à-dire masque progressivement l'élément en modifiant son opacité. Si l'utilisateur a besoin d'effectuer un effet de fondu en un nombre spécifique de millisecondes, exécutez une fonction de rappel puis utilisez les paramètres « speed », « easing » et « callback » avec la méthode « fadeOut() ». Cet article explique pratiquement la méthode fadeOut() de jQuery pour la création d'un effet de fondu sortant en douceur.