jQuery Effetti - Dissolvenza

jQuery fornisce un'interfaccia semplice per eseguire vari effetti sorprendenti.

I metodi di effetto jQuery ci permettono di applicare rapidamente effetti comuni con la minima configurazione.

Metodi di dissolvenza jQuery

Con jQuery, possiamo realizzare effetti di dissolvenza.

Abbiamo i seguenti metodi di dissolvenza jQuery:

• fadeIn()

• fadeOut()

• fadeToggle()

• fadeTo()

La sezione successiva ti mostrerà come utilizzare ogni metodo di dissolvenza.

jQuery fadeIn() e fadeOut()

jQuery fadeIn()Il metodo gradualmente cambia l'opacità dell'elemento selezionato da nascosto a visibile.

jQuery fadeOut()Il metodo gradualmente cambia l'opacità dell'elemento selezionato da visibile a nascosto.

Ese esempio dimostra l'uso dei metodi fadeIn() e fadeOut().

//　淡出显示的段落
$("#fadeout-btn").click(function(){
　　$("p").fadeOut();
});
//　淡入隐藏的段落
$("#fadein-btn").click(function(){
　　$("p").fadeIn();
});

Questo èfadeIn()Sintassi del metodo:

$(selector).fadeIn(duration, easing, callback);

Questo èfadeOut()Sintassi del metodo:

$("selector").fadeOut(durata, easing, callback);

indipendentementefadeIn()efadeOut()Il metodo accetta tre parametri opzionali:

• duration -Determina se l'effetto di sfumare/inDurataQuanto tempo. Valori possibili: "slow", "fast" o millisecondi

• easing - Indica la funzione di easing da utilizzare per la transizione. Valori possibili: "swing", "linear".

• callback-Specifica la funzione da chiamare una volta completata l'animazione di sfumatura.

Esempio seguente dimostra l'uso di fadeIn() e fadeOut() condurationParametro:

$("#fadeout-btn").click(function(){
　　$("p").fadeOut(1500);
});
$("#fadein-btn").click(function(){
　　$("p").fadeIn(1500);
});

L'esempio seguente dimostra l'uso di fadeIn() e fadeOut() conCallbackParametro:

$("#fadeout-btn").click(function(){
　　$("div").fadeOut(600, function(){
　　　　$("h3").text("Sfumatura completata.");
　　});
});
$("#fadein-btn").click(function(){
　　$("div").fadeIn(600, function(){
　　　　$("h3").text("Sfumatura completata.");
　　});
});

Animare tutti i segmenti (in questo caso le parole) per sfumare rapidamente e completare ogni animazione in 200 millisecondi:

$("button").click(function(){
　　$("span:last-child").fadeOut("fast", function(){
　　　　$("this").prev().fadeOut("fast", arguments.callee);
　　});
});

Il metodo fadeToggle() di jQuery

Possiamo anche utilizzarefadeToggle()Il metodo passa tra l'entrata e l'uscita dell'elemento HTML.

Se l'elemento selezionato esce in scenafadeToggle()Lo sfuma.

Se l'elemento selezionato entra in scenafadeToggle()Sfuma li.

Esempio seguente su tutti<p>Passaggio tra sfumatura in entrata e uscita dell'elemento:

$("button").click(function(){
　　$("p").fadeToggle();
});

Questo èfadeToggle()Sintassi del metodo:

$("selector").fadeToggle(durata, easing, callback);

IlfadeToggle()Il metodo accetta tre parametri opzionali:

• duration -Determina se l'effetto di sfumare/inDurataQuanto tempo. Valori possibili: "slow", "fast" o millisecondi

• easing - Indica la funzione di easing da utilizzare per la transizione. Valori possibili: "swing", "linear".

• callback-Specifica la funzione da chiamare una volta completata l'animazione di sfumatura.

Metodo fadeTo() di jQuery

jQuery fadeTo()Il metodo riduce gradualmente l'opacità dell'elemento selezionato all'opacità specificata.

Attenzione:IlfadeTo()Il metodo non cambia la布局 della pagina (l'elemento selezionato continuerà a occupare lo stesso spazio prima).

Questo esempio riduce gradualmente<div>Opacità dell'elemento:

$("button").click(function(){
　　$("div").fadeTo(500, 0.2);
});

Questo èfadeTo()Sintassi del metodo:

$(selector)fadeTo.(duration, opacity, easing, callback)

Parametro:

• duration -Determina se l'effetto di sfumare/inDurataQuanto tempo. Valori possibili: "slow", "fast" o millisecondi

• opacità-Specifica l'opacità da sfumare. Deve essere un numero tra 0.00 e 1.00

• easing -(opzionale) Indica la funzione di easing da utilizzare per la transizione. Valori possibili: "swing", "linear"

• callback-(opzionale) Specifica la funzione da chiamare una volta completato l'effetto di sfumare/in

L'esempio seguente dimostra l'uso di fadeTo()CallbackParametro:

$("button").click(function(){
　　$("div").fadeTo(500, 0, function(){
　　　　alert("Transparenza ridotta!!!");
　　});
});

Referenza degli Effetti di jQuery

Per una guida completa agli effetti, visitare il nostroManuale di Referenza degli Effetti di jQuery.