Effetti jQuery - Dissolvenza


Con jQuery puoi sfumare gli elementi dentro e fuori dalla visibilità.

Fare clic per visualizzare il pannello in apertura/chiusura

Poiché il tempo è prezioso, offriamo un apprendimento facile e veloce.

A W3Schools, puoi studiare tutto ciò di cui hai bisogno per imparare, in un formato accessibile e pratico.


Esempi


Dimostra il metodo jQuery fadeIn().


Dimostra il metodo jQuery fadeOut().


Dimostra il metodo jQuery fadeToggle().


Dimostra il metodo jQuery fadeTo().


jQuery metodi di dissolvenza

Con jQuery puoi sfumare un elemento dentro e fuori dalla visibilità.

jQuery ha i seguenti metodi di dissolvenza:

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

jQuery metodo fadeIn()

Il metodo jQuery fadeIn()viene utilizzato per sfumare in un elemento nascosto.

Sintassi:

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

Il parametro di velocità opzionale specifica la durata dell'effetto. Può assumere i seguenti valori: "slow", "fast" o millisecondi.

Il parametro di callback opzionale è una funzione da eseguire al termine della dissolvenza.

L'esempio seguente mostra il fadeIn()metodo con diversi parametri:

Esempio

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


jQuery metodo fadeOut()

Il metodo jQuery fadeOut()viene utilizzato per sfumare un elemento visibile.

Sintassi:

$(selector).fadeOut(speed,callback);

Il parametro di velocità opzionale specifica la durata dell'effetto. Può assumere i seguenti valori: "slow", "fast" o millisecondi.

Il parametro di callback opzionale è una funzione da eseguire al termine della dissolvenza.

L'esempio seguente mostra il fadeOut()metodo con diversi parametri:

Esempio

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

jQuery metodo fadeToggle()

Il metodo jQuery fadeToggle()alterna tra i metodi fadeIn()e .fadeOut()

Se gli elementi sono sbiaditi, fadeToggle()li sbiadirà.

Se gli elementi sono sbiaditi, fadeToggle()li sbiadirà.

Sintassi:

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

Il parametro di velocità opzionale specifica la durata dell'effetto. Può assumere i seguenti valori: "slow", "fast" o millisecondi.

Il parametro di callback opzionale è una funzione da eseguire al termine della dissolvenza.

L'esempio seguente mostra il fadeToggle()metodo con diversi parametri:

Esempio

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

jQuery metodo fadeTo()

fadeTo()Il metodo jQuery consente la dissolvenza a una determinata opacità (valore compreso tra 0 e 1).

Sintassi:

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

Il parametro di velocità richiesto specifica la durata dell'effetto. Può assumere i seguenti valori: "slow", "fast" o millisecondi.

Il parametro di opacità richiesto nel fadeTo()metodo specifica la dissolvenza a una determinata opacità (valore compreso tra 0 e 1).

Il parametro di callback facoltativo è una funzione da eseguire al termine della funzione.

L'esempio seguente mostra il fadeTo()metodo con diversi parametri:

Esempio

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

Esercizi jQuery

Mettiti alla prova con gli esercizi

Esercizio:

Usa un metodo jQuery per sfumare un elemento <div>.

$("div").();


Riferimento agli effetti jQuery

Per una panoramica completa di tutti gli effetti jQuery, vai al nostro Riferimento agli effetti jQuery .