Metodi di svanimento jquery spiegati

Lo sbiadimento è la proprietà che consente di manipolare l'opacità (trasparenza) degli elementi HTML. JQuery offre quattro metodi di sbiadimento che consentono di cambiare la trasparenza degli elementi. Questi metodi includono, FadeIn (), FadeOut (), Fadetoggle () e FadeTo ().

Questo articolo esplora i metodi di sbiadimento in jQuery e serve i seguenti risultati di apprendimento.

• Funzionamento dei metodi di sbiadimento jQuery
• Utilizzo di metodi di dissolvenza jQuery

Come usare i metodi di dissolvenza jQuery

Come discusso in precedenza, JQuery ha quattro metodi di sbiadimento e una visione profonda di tutti quei metodi è fornita qui.

Come usare il metodo FadeIn ()

Il metodo FadeIn () mostra l'elemento aumentando l'opacità. La sintassi di questo metodo è fornita di seguito:

$ (selettore).Fadein (velocità, callback);

La sintassi ha le seguenti istanze

• selettore può essere qualsiasi elemento o può fare riferimento alla classe o all'ID di qualsiasi elemento.
• velocità può essere specificato in uno dei quattro valori: lento, medio, veloce e millisecondi.
• richiamare è il parametro opzionale ed è esercitato dopo l'esecuzione corretta.

Esempio

Il codice fornito di seguito mostra l'utilizzo del metodo JQuery Fadeout ().

jQuery

$ (documento).ready (function ()
$ (".Fadein ").Click (function ()
$ (".lento").Fadein ("lento");
$ (".veloce").FadeIn ("Fast");
$ (".Mili ").Fadein (2000);
);
);

Il codice è descritto come,

• .dissolvenza si riferisce alla classe del pulsante e facendo clic sul pulsante, svanirà nei paragrafi
• IL .lento, .veloce e .Mili Le classi si riferiscono a tre paragrafi che saranno sbiaditi a varie velocità

Nota: La proprietà del display dell'elemento (che stai per sbiadire) non deve essere impostata su nessuno.

Produzione

Dato che stiamo sbiadendo e la proprietà del display dei paragrafi è impostata su nessuno. Pertanto, i paragrafi saranno nascosti nell'esecuzione della pagina.

Dopo aver fatto clic sul pulsante, osserverai che i paragrafi appariranno a seconda della velocità come mostrato nell'immagine seguente.

Come utilizzare il metodo Fadeout ()

Il metodo Fadeout () sfuma l'elemento visualizzato diminuendo l'opacità dell'elemento. La sintassi di questo metodo è fornita di seguito:

$ (selettore).Fadeout (velocità, callback);

Esempio

Il codice scritto di seguito mostra l'utilizzo del metodo JQuery Fadeout ().

Il codice sopra è descritto come,

• .dissolvenza Viene utilizzato la classe di pulsante che sbiadirà i paragrafi
• IL .lento, .veloce e .Mili sono i nomi di classe impostati per i paragrafi e verranno utilizzati per svanire e per lo stile

Produzione

Nel metodo Fadeout (), i paragrafi verranno visualizzati come mostrato di seguito.

Dopo aver fatto clic sul pulsante, i paragrafi svaniranno.

Come usare il metodo fadeto ()

Il metodo Fadeto () funziona sul metodo dei principi di Fadeout (). Tuttavia, Fadeto () svanisce l'elemento usando un intervallo numerico (0-1). Questo intervallo di opacità definisce il livello di opacità dell'elemento, maggiore è il numero più alto sarà l'opacità e viceversa. La sintassi è fornita di seguito:

$ (selettore).Fadeto (velocità, opacità, callback);

Il parametro di opacità accetta un valore da 0 a 1.

Esempio

Il codice fornito di seguito pratichi il metodo FadeTo ().

Il codice è descritto come,

• .Fadeto si riferisce alla classe dei pulsanti
• IL #min, #avg e #max rappresenta gli ID di tre tag DIV e questi ID si riferiscono ai valori che verranno utilizzati per il metodo Fadeto ()
• Il valore di sbiadimento varia da 0 a 1 nei metodi Fadeto ()

Produzione

Prima di applicare il metodo Fadeto ()

Dopo aver applicato il metodo fadeto ()

Dall'output di cui sopra, si osserva che il paragrafo con valore 0 è stato lavato.

Come utilizzare il metodo Fadetoggle ()

Il metodo Fadetoggle () si trova tra i metodi Fadein () e Fadeout (). Usando Fadetoggle (), è possibile visualizzare un elemento nascosto e nascondere un elemento visualizzato. La sintassi di questo metodo è:

$ (selettore).fadeto (velocità, callback);

Esempio

Il codice fornito di seguito funzioni per utilizzare il metodo Fadetoggle ().

• .Fadetoggle La classe si riferisce al pulsante
• IL #lento, #fast e #mili Rappresenta vari id di div

Produzione

Prima di fare clic sul pulsante

Dopo aver fatto clic sul pulsante,

Si è concluso che, se viene visualizzato l'elemento, sarà nascosto dopo il metodo Fadetoggle () (come fa Fadeout () Metodo). Allo stesso modo, se l'elemento è nello stato di Fadeout (), allora il Fadetoggle () fungerà da metodo FadeIn ().

Conclusione

JQuery fornisce vari metodi di sbiadimento che includono FadeIn (), FadeOut (), Fadetoggle () e FadeTo () che aiutano a sbiadire gli elementi HTML. Questa guida fornisce il funzionamento e l'utilizzo di ciascun metodo di sbiadimento jQuery. Il metodo FadeIn () visualizza l'elemento se è nascosto mentre il fadeout () nasconde l'elemento. Il metodo Fadeto () Fade in o fuori a seconda del numero di opacità. Infine, il metodo Fadetoggle () funziona tra i metodi FadeIn () e FadeOut ().