I metodi slideDown(), slideUp() e slideToggle() di jQuery

  • jQuery
  • Gabriele Romanato

jQuery possiede tre distinti metodi per gestire lo sliding degli elementi: slideDown(), slideUp() e slideToggle(). Ciascuno di questi tre metodi crea un effetto diverso sugli elementi a seconda del fatto che l'elemento selezionato sia visibile o meno. Per visibilità in jQuery si intendono principalmente gli effetti ottenibili tramite le proprietà CSS display e visibility. Vediamo in dettaglio questi tre metodi.

Sintassi comune

$(elemento).slideNome(durata, callback)

  • durata: la durata dell'animazione, espressa sia con parole chiave (fast, normal, slow, predefinito normal) che con un valore intero in millisecondi
  • callback: la funzione da eseguire quando l'animazione è completa.

slideDown()

Questo metodo mostra un elemento nascosto facendolo scivolare dall'alto verso il basso:


down.click(function() {
    test.slideDown(1000, function() {
        alert('Complete');
    });
});

slideUp()

Questo metodo nasconde un elemento visibile facendolo scivolare dal basso verso l'alto:


up.click(function() {
    test.slideUp(1000, function() {
        alert('Complete');
    });
});

slideToggle()

L'azione di questo metodo varia in base alla visibilità dell'elemento: se l'elemento è nascosto, l'azione sarà identica a quella di slideDown(), se invecee l'elemento è visibile, l'azione sarà quella di slideUp():


toggle.click(function() {
    test.slideToggle(1000, function() {
        alert('Complete');
    });
});

Potete visionare l'esempio finale in questa pagina.

Torna su