Aquesta publicació explicarà la implementació pràctica del mètode fadeOut() de jQuery per a la creació d'un efecte d'esvaïment suau.
Com crear efectes d'esvaïment suaus mitjançant el mètode fadeOut() de jQuery?
jQuery ' desaparèixer() ” El mètode amaga gradualment l'element seleccionat reduint-ne l'opacitat. Aquest mètode canvia l'estat de l'element seleccionat de visible a ocult. L'element ocult no es mostra a la pàgina web fins que l'usuari el torna a mostrar mitjançant el ' dissoldre's en() ” mètode.
Sintaxi
$ ( selector ) . desaparèixer ( velocitat, facilitat, devolució de trucada ) ;
La sintaxi anterior admet els següents paràmetres opcionals per personalitzar l'efecte de desaparició:
- velocitat: Especifica la velocitat de l'efecte d'esvaïment en mil·lisegons. Per defecte, el seu valor és '400 ms'. A més, també admet dos valors integrats 'lent' i 'ràpid'.
- alleujament: Mostra la velocitat de l'animació que s'esvaeix en diferents punts. Per defecte, el seu valor és 'swing (més lent al principi/final i lent al mig)'. A més, també funciona en el 'lineal (velocitat constant en l'animació d'esvaïment)'.
- devolució de trucada: Defineix una funció definida per l'usuari que s'executa després de completar l'animació d'esvaïment per realitzar la tasca definida.
Utilitzem pràcticament el mètode definit anteriorment.
Codi HTML
Abans de passar al mètode 'fadeOut()', mireu el següent codi HTML que crea un element 'div' de mostra sobre el qual es realitzarà l'efecte de desaparició:
< botó > desaparèixer ( Amaga Element ) botó >< br >< br >< id div = 'el meuDiv' estil = 'alçada: 80 px; amplada: 300 px; vora: 2 px negre sòlid; marge: automàtic; alineació de text: centre' >
< h2 > Benvingut a Linuxhint h2 >
div >
A les línies de codi anteriors:
- El '
L'etiqueta afegeix un element botó. - El ' 'L'etiqueta crea un element div amb un identificador 'myDiv' i s'ha dissenyat amb l'ajuda de les següents propietats d'estil (alçada, amplada, vora, marge, alineació de text).
- Dins del div, el ' L'etiqueta ” especifica el primer element de subtítol del nivell 2.
Ara, comenceu amb el primer exemple.
Exemple 1: creeu efectes d'esvaïment suaus amb el valor predeterminat de fadeOut()
El primer exemple amaga l'element div coincident utilitzant el mètode 'fadeOut()' amb el seu valor predeterminat '400ms':
< guió >
$ ( document ) . llest ( funció ( ) {
$ ( 'botó' ) . feu clic ( funció ( ) {
$ ( '#myDiv' ) . desaparèixer ( ) ;
} ) ;
} ) ;
guió >A les línies de codi anteriors:
- En primer lloc, el ' llest () ” executa les funcions donades quan es carrega el document HTML/DOM actual.
- A continuació, el ' clic () ” executa la funció enllaçada en fer clic al botó quan es fa clic al seu selector “botó” associat.
- Després d'això, el ' desaparèixer() El mètode amaga l'element div accedit l'identificador del qual és 'myDiv' en 400 ms, és a dir, el valor predeterminat.
Sortida
S'observa que el clic del botó donat s'esvaeix l'element div gradualment en '400 ms'.
Exemple 2: creeu efectes d'esvaïment suaus amb el paràmetre 'velocitat' de fadeOut()
Aquest exemple utilitza el mètode 'fadeOut()' amb els valors integrats (lent/ràpid) del paràmetre 'velocitat':
< guió >
$ ( document ) . llest ( funció ( ) {
$ ( 'botó' ) . feu clic ( funció ( ) {
$ ( '#myDiv' ) . desaparèixer ( 'lent' ) ;
} ) ;
} ) ;
guió >Ara, el ' desaparèixer() ” mètode passa el “ lent ” com a paràmetre per crear sense problemes l'efecte de desaparició, és a dir, canvia l'estat de l'element div seleccionat de visible a ocult.
Sortida
Es pot veure que l'element div seleccionat s'amaga lentament al clic del botó.
Exemple 3: creeu efectes d'esvaïment suaus amb el paràmetre 'durada' de fadeOut()
Aquest exemple aplica el mètode 'fadeOut()' amb un nombre específic de mil·lisegons com a paràmetre de durada:
< guió >
$ ( document ) . llest ( funció ( ) {
$ ( 'botó' ) . feu clic ( funció ( ) {
$ ( '#myDiv' ) . desaparèixer ( 6000 ) ;
} ) ;
} ) ;
guió >Ara, el mètode 'fadeOut()' utilitza el nombre especificat de mil·lisegons per ocultar l'element coincident en la durada de temps donada.
Sortida
La sortida anterior amaga els canvis d'element div donats en fer clic al botó en un interval de temps determinat.
Exemple 4: creeu efectes d'esvaïment suaus amb la funció 'callback' fadeOut()
Aquest exemple executa una funció de devolució de trucada quan s'ha completat l'efecte de desaparició mitjançant el mètode 'fadeOut()':
< guió >
$ ( document ) . llest ( funció ( ) {
$ ( 'botó' ) . feu clic ( funció ( ) {
$ ( '#myDiv' ) . desaparèixer ( 4000 , funció ( ) {
consola. registre ( 'L'element div donat s'amaga correctament!' )
} ) ;
} ) ;
} ) ;
guió >Al bloc de codi indicat:
- El ' desaparèixer() El mètode s'esvaeix l'element div coincident en un nombre específic de mil·lisegons i després executa la funció de 'callback' proporcionada.
- Dins del ' devolució de trucada ', la funció ' console.log() ” s'aplica per mostrar la declaració especificada després de la finalització de l'efecte “esvaïment”.
Sortida
Es veu que la 'consola' mostra una declaració definida a la funció de devolució de trucada després d'ocultar l'element div donat.
Exemple 5: creeu efectes de desaparició suau amb el paràmetre 'fadeOut' ()
Aquest exemple aplica el mètode 'fadeOut()' amb els possibles valors del paràmetre 'easing':
< guió >
$ ( document ) . llest ( funció ( ) {
$ ( 'botó' ) . feu clic ( funció ( ) {
$ ( '#myDiv' ) . desaparèixer ( 4000 , 'lineal' ) ;
} ) ;
} ) ;
guió >Ara, el ' desaparèixer() El mètode realitza l'efecte de desaparició en un nombre específic de mil·lisegons a una velocitat constant a causa del ' lineal ” valor.
Sortida
La sortida canvia l'estat de l'element donat de visible a ocult a una velocitat constant. Això és tot per implementar l'efecte 'esvaïment' a l'element.
Conclusió
Per crear un efecte d'esvaïment suau utilitzant el '' de jQuery desaparèixer() ”, l'usuari no requereix cap paràmetre addicional. Aquest mètode s'esvaeix, és a dir, amaga l'element gradualment canviant-ne l'opacitat. Si l'usuari necessita realitzar un efecte d'esvaïment en un nombre específic de mil·lisegons, executeu una funció de devolució de trucada i, a continuació, utilitzeu els paràmetres de 'velocitat', 'atenuació' i 'devolució de trucada' amb el mètode 'fadeOut()'. Aquesta publicació pràcticament explicava el mètode fadeOut() de jQuery per a la creació d'un efecte d'esvaïment suau.