Questo post spiegherà l'implementazione pratica del metodo fadeOut() di jQuery per la creazione di un effetto di dissolvenza graduale.
Come creare effetti di dissolvenza in uscita uniformi utilizzando il metodo fadeOut() di jQuery?
' di jQuery dissolvenza() ” nasconde gradualmente l'elemento selezionato diminuendone l'opacità. Questo metodo modifica lo stato dell'elemento selezionato da visibile a nascosto. L'elemento nascosto non viene visualizzato sulla pagina Web finché l'utente non lo visualizza nuovamente utilizzando il pulsante ' dissolvenzaIn() ' metodo.
Sintassi
$ ( selettore ) . dissolvenza ( velocità, facilità, richiamata ) ;
La sintassi precedente supporta i seguenti parametri opzionali per personalizzare l'effetto di dissolvenza in chiusura:
- velocità: Specifica la velocità dell'effetto di dissolvenza in millisecondi. Per impostazione predefinita il suo valore è “400ms”. Inoltre, supporta anche due valori integrati “lento” e “veloce”.
- allentamento: Mostra la velocità dell'animazione in dissolvenza in diversi punti. Per impostazione predefinita, il suo valore è 'swing (più lento all'inizio/fine e lento al centro)'. Inoltre, funziona anche sul “lineare (velocità costante nell'animazione in dissolvenza)”.
- richiamare: Definisce una funzione definita dall'utente che viene eseguita dopo aver completato l'animazione in dissolvenza per eseguire l'attività definita.
Usiamo praticamente il metodo sopra definito.
Codice HTML
Prima di passare al metodo “fadeOut()”, osserva il seguente codice HTML che crea un elemento “div” di esempio su cui verrà eseguito l'effetto di dissolvenza:
< pulsante > dissolvenza ( Nascondere Elemento ) pulsante >< fratello >< fratello >< ID div = 'mioDiv' stile = 'altezza: 80px; larghezza: 300px; bordo: 2px nero pieno; margine: automatico; allineamento testo: centro' >
< h2 > Benvenuti in Linuxhint h2 >
div >
Nelle righe di codice sopra:
- IL '
Il tag 'aggiunge un elemento pulsante. - IL ' ' crea un elemento div con un ID 'myDiv' e viene stilizzato con l'aiuto delle seguenti proprietà di stile (altezza, larghezza, bordo, margine, allineamento testo).
- All'interno del div, il ' Il tag ' specifica il primo elemento di sottointestazione del livello 2.
Ora iniziamo con il primo esempio.
Esempio 1: creare effetti di dissolvenza in uscita uniformi con il valore predefinito di fadeOut()
Il primo esempio nasconde l'elemento div corrispondente utilizzando il metodo “fadeOut()” con il suo valore predefinito “400ms”:
< sceneggiatura >
$ ( documento ) . pronto ( funzione ( ) {
$ ( 'pulsante' ) . clic ( funzione ( ) {
$ ( '#mioDiv' ) . dissolvenza ( ) ;
} ) ;
} ) ;
sceneggiatura >Nelle righe di codice sopra:
- In primo luogo, il “ pronto() ” esegue le funzioni specificate quando viene caricato il documento HTML/DOM corrente.
- Successivamente, il “ clic() ' esegue la funzione collegata al clic del pulsante quando viene fatto clic sul selettore 'pulsante' associato.
- Dopodiché, il “ dissolvenza() ' Il metodo nasconde l'elemento div a cui si accede il cui ID è 'myDiv' in 400 ms, ovvero il valore predefinito.
Produzione
Si osserva che il clic del pulsante specificato dissolve gradualmente l'elemento div in '400 ms'.
Esempio 2: creare effetti di dissolvenza in uscita uniformi con il parametro 'velocità' di fadeOut()
Questo esempio utilizza il metodo 'fadeOut()' con i valori incorporati (lento/veloce) del parametro 'velocità':
< sceneggiatura >
$ ( documento ) . pronto ( funzione ( ) {
$ ( 'pulsante' ) . clic ( funzione ( ) {
$ ( '#mioDiv' ) . dissolvenza ( 'lento' ) ;
} ) ;
} ) ;
sceneggiatura >Ora il ' dissolvenza() ' metodo passa il ' lento ' come parametro per creare senza problemi l'effetto di dissolvenza, ovvero modifica lo stato dell'elemento div selezionato da visibile a nascosto.
Produzione
Si può vedere che l'elemento div selezionato si nasconde lentamente al clic del pulsante.
Esempio 3: creare effetti di dissolvenza in uscita uniformi con il parametro 'durata' fadeOut()
Questo esempio applica il metodo 'fadeOut()' con un numero specifico di millisecondi come parametro di durata:
< sceneggiatura >
$ ( documento ) . pronto ( funzione ( ) {
$ ( 'pulsante' ) . clic ( funzione ( ) {
$ ( '#mioDiv' ) . dissolvenza ( 6000 ) ;
} ) ;
} ) ;
sceneggiatura >Ora, il metodo 'fadeOut()' utilizza il numero specificato di millisecondi per nascondere l'elemento corrispondente nella durata di tempo specificata.
Produzione
L'output precedente nasconde le modifiche apportate all'elemento div facendo clic su un pulsante in un determinato intervallo di tempo.
Esempio 4: creare effetti di dissolvenza in uscita uniformi con la funzione 'callback' fadeOut()
Questo esempio esegue una funzione di callback al completamento dell'effetto di dissolvenza in chiusura tramite il metodo “fadeOut()”:
< sceneggiatura >
$ ( documento ) . pronto ( funzione ( ) {
$ ( 'pulsante' ) . clic ( funzione ( ) {
$ ( '#mioDiv' ) . dissolvenza ( 4000 , funzione ( ) {
consolle. tronco d'albero ( 'L'elemento div è stato nascosto con successo!' )
} ) ;
} ) ;
} ) ;
sceneggiatura >Nel blocco di codice indicato:
- IL ' dissolvenza() ' Il metodo sfuma l'elemento div corrispondente in un numero specifico di millisecondi e quindi esegue la funzione di 'callback' fornita.
- Dentro il ' richiamare ', la funzione ' console.log() ' viene applicato per visualizzare la dichiarazione specificata dopo il completamento dell'effetto 'dissolvenza in chiusura'.
Produzione
Si vede che la 'console' mostra un'istruzione definita nella funzione di callback dopo aver nascosto l'elemento div specificato.
Esempio 5: creare effetti di dissolvenza in uscita uniformi con il parametro 'easing' di fadeOut()
In questo esempio viene applicato il metodo “fadeOut()” con i possibili valori del parametro “easing”:
< sceneggiatura >
$ ( documento ) . pronto ( funzione ( ) {
$ ( 'pulsante' ) . clic ( funzione ( ) {
$ ( '#mioDiv' ) . dissolvenza ( 4000 , 'lineare' ) ;
} ) ;
} ) ;
sceneggiatura >Ora il ' dissolvenza() ' Il metodo esegue l'effetto di dissolvenza in un numero specifico di millisecondi a velocità costante a causa del ' lineare ' valore.
Produzione
L'output modifica lo stato dell'elemento specificato da visibile a nascosto a velocità costante. Questo è tutto per implementare l'effetto 'dissolvenza' sull'elemento.
Conclusione
Per creare un effetto di dissolvenza uniforme utilizzando ' dissolvenza() ', l'utente non richiede alcun parametro aggiuntivo. Questo metodo sfuma, ovvero nasconde l'elemento gradualmente modificandone l'opacità. Se l'utente deve eseguire un effetto di dissolvenza in uno specifico numero di millisecondi, eseguire una funzione di callback, quindi utilizzare i parametri 'speed', 'easing' e 'callback' con il metodo 'fadeOut()'. Questo post spiega praticamente il metodo fadeOut() di jQuery per la creazione di un effetto di dissolvenza graduale.