jQuery Effetti - Scorrimento

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 jQuery di scorrimento

Con jQuery, possiamo creare effetti di scorrimento sugli elementi.

Abbiamo i seguenti metodi jQuery diapositive:

• slideUp()

• slideDown()

• slideToggle()

Vi mostrerò come utilizzare ogni metodo di scorrimento.

jQuery slideUp() e slideDown()

slideUp()Il metodo nasconde l'elemento selezionato in modo scorrevole.

slideDown()Il metodo mostra l'elemento selezionato in modo scorrevole.

Esempi di utilizzo di slideUp() e slideDown()

// Scorrimento a salire del paragrafo
　$("#btn1").click(function(){
　　　　　　$("p").slideUp();
});
// Scorrimento a scendere del paragrafo
　$("#btn2").click(function(){
　　　　　　$("p").slideDown();
});

Questo èslideUp() Sintassi del metodo:

$("selector").slideUp(duration, easing, callback);

Questo èslideDown()Sintassi del metodo:

$("selector").slideDown(duration, easing, callback);

IndipendentementeslideUp()eslideDown()Il metodo accetta tre parametri opzionali:

• duration -Determina quanto tempo durerà l'effetto di scorrimento. Valori possibili: "slow", "fast" o in millisecondi

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

• callback-Specifica la funzione da chiamare una volta completato lo slide

Esempi di utilizzo di slideUp() e slideDown()durationParametri:

$("#btn1").click(function(){
　　$("p").slideUp(1500);
});
$("#btn2").click(function(){
　　$("p").slideDown(1500);
});

Esempi di utilizzo di slideUp() e slideDown()CallbackParametri:

$("#btn1").click(function(){
　　$("div").slideUp(1500, function(){
　　　　alert("La scorrimento a salire è completato!");
　　});
});
$("#btn2").click(function(){
　　$("div").slideDown(1500, function(){
　　　　alert("La scorrimento a scendere è completato!");
　　});
});

Animare tutti i segmenti (in questo caso le parole) per scorrire rapidamente, completando ogni animazione in 200 millisecondi:

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

metodo jQuery slideToggle()

Possiamo anche usareslideToggle()Il metodo cambia tra gli elementi HTML scorrendo in su e in giù.

Se l'elemento selezionato viene visualizzato inizialmente, verrà nascosto; se nascosto, verrà visualizzato.

Esempio seguente che, quando si clicca sul pulsante, cambia tra slideUp e slideDown su tutti<p>Cambiare tra slideUp e slideDown dell'elemento:

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

Questo èslideToggle()Sintassi del metodo:

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

slideToggle()Il metodo accetta tre parametri opzionali:

• duration -Determina quanto tempo durerà l'effetto di scorrimento. Valori possibili: "slow", "fast" o in millisecondi

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

• callback-Specificare una funzione da chiamare dopo che il metodo slideToggle() è completato

Manuale di riferimento degli effetti jQuery

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