jQuery Effetti - Sfumatura in Entrambi i Sensi

Grazie a jQuery, è possibile ottenere effetti di sfumatura per gli elementi.

Dimostrazione degli effetti

Clicca qui per nascondere/mostrare il pannello

Un pollice di tempo è un pollice d'oro, quindi ti offriamo contenuti di apprendimento veloci e facili da capire.

Ecco come ottenere qualsiasi conoscenza di cui hai bisogno in modo chiaro e conveniente.

Esempio

jQuery fadeIn()
Dimostrazione del metodo jQuery fadeIn()
jQuery fadeOut()
Dimostrazione del metodo jQuery fadeOut()
jQuery fadeToggle()
Dimostrazione del metodo jQuery fadeToggle()
jQuery fadeTo()
Dimostrazione del metodo jQuery fadeTo()

Metodi di sfumatura jQuery

Grazie a jQuery, è possibile ottenere effetti di sfumatura per gli elementi.

jQuery ha quattro metodi fade:

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

Il metodo jQuery fadeIn()

Il metodo jQuery fadeIn() viene utilizzato per far apparire gli elementi nascosti.

Sintassi:

$(selettore).fadeIn(speed,callback);

Parametro opzionale speed Il parametro determina la durata dell'effetto. Può assumere i seguenti valori: "slow", "fast" o millisecondi.

Parametro opzionale callback Il parametro è il nome della funzione da eseguire dopo che l'effetto di sfumatura è completato.

Esempio seguente dimostra il metodo fadeIn() con diversi parametri:

Esempio

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
);

Prova tu stesso

Il metodo jQuery fadeOut()

Il metodo jQuery fadeOut() viene utilizzato per sfumare gli elementi visibili.

Sintassi:

$(selettore.fadeOut(speed,callback);

Parametro opzionale speed Il parametro determina la durata dell'effetto. Può assumere i seguenti valori: "slow", "fast" o millisecondi.

Parametro opzionale callback Il parametro è il nome della funzione da eseguire dopo che l'effetto di sfumatura è completato.

Di seguito è riportato un esempio che dimostra il metodo fadeOut() con diversi parametri:

Esempio

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
);

Prova tu stesso

Il metodo fadeToggle() di jQuery

Il metodo fadeToggle() di jQuery può passare tra fadeIn() e fadeOut().

Se l'elemento è già sfumato, fadeToggle() aggiungerà un effetto di sfumatura all'elemento.

Se l'elemento è già sfumato, fadeToggle() aggiungerà un effetto di sfumatura all'elemento.

Sintassi:

$(selettore).fadeToggle(speed,callback);

Parametro opzionale speed Il parametro determina la durata dell'effetto. Può assumere i seguenti valori: "slow", "fast" o millisecondi.

Parametro opzionale callback Il parametro è il nome della funzione da eseguire dopo che l'effetto di sfumatura è completato.

Di seguito è riportato un esempio che dimostra il metodo fadeToggle() con diversi parametri:

Esempio

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
);

Prova tu stesso

Il metodo fadeTo() di jQuery

Il metodo fadeTo() di jQuery consente di transitare gradualmente a una opacità data (valore tra 0 e 1).

Sintassi:

$(selettore).fadeTo(speed,opacity,callback);

Il parametro obbligatorio speed determina la durata dell'effetto. Può assumere i seguenti valori: "slow", "fast" o millisecondi.

Il parametro obbligatorio opacity nel metodo fadeTo() imposta l'effetto di sfumatura per l'opacità fornita (valore tra 0 e 1).

Il parametro opzionale callback è il nome della funzione da eseguire dopo che la funzione è stata completata.

Di seguito è riportato un esempio che dimostra il metodo fadeTo() con diversi parametri:

Esempio

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
);

Prova tu stesso

Manuale di riferimento degli effetti jQuery

Per consultare completamente gli effetti di jQuery, visita il nostro Manuale di riferimento degli effetti jQuery。