jQuery: i metodi per gestire l'assolvenza e la dissolvenza degli elementi

jQuery dispone di quattro metodi per gestire l'assolvenza e la dissolvenza 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() {
        console.log( "Complete" );
    });
});

fadeOut()

Questo metodo crea un effetto di dissolvenza:

$out.click(function() {
    $test.fadeOut( 1000, function() {
        console.log( "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() {
        console.log( "Complete" );
    });
});

fadeTo()

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

$to.click(function() {
    $test.fadeTo( 1000, 0.5, function() {
        console.log( "Complete" );
    });
});