I metodi fadeIn(), fadeOut(), fadeToggle() e fadeTo() di jQuery

jQuery dispone di quattro metodi per gestire l'opacità degli elementi: fadeIn(), fadeOut(), fadeToggle() e fadeTo(). Vediamoli in dettaglio.

Sintassi generale

fadeIn(), fadeOut(), fadeToggle()

$(elemento).fadeNone(durata, callback)

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

fadeTo()

$(elemento).fadeTo(durata, opacità, callback)

• durata: la durata dell'animazione, espressa o in parole chiave (normal, fast, slow, predefinito normal) o in millisecondi
• opacità: il valore di destinazione su cui impostare l'opacità finale dell'elemento
• callback: la funzione da eseguire quando l'animazione è completa.

fadeIn()

Questo metodo crea un effetto di assolvenza:

$in.click(function() {
    test.fadeIn(1000, function() {
        alert('Complete');
    });
});

fadeOut()

Questo metodo crea un effetto di dissolvenza:

out.click(function() {
    test.fadeOut(1000, function() {
        alert('Complete');
    });
});

fadeToggle()

Se l'opacità dell'elemento è diversa da 0, questo metodo crea un effetto di dissolvenza, in caso contrario di assolvenza:

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

fadeTo()

Questo metodo imposta l'opacità di un elemento su un valore dato:

to.click(function() {
    test.fadeTo(1000, 0.5, function() {
        alert('Complete');
    });
});