Metodo fadeOut

Il metodo fadeOut nasconde gradualmente gli elementi. È possibile mostrare gli elementi utilizzando il metodo fadeIn, rendendoli opachi.

Sintassi

Mostra in un tempo specificato, 400ms di default:

javascript.fadeOut(durata);

Il tempo può essere specificato non solo in millisecondi, ma anche con le parole chiave slow (600ms) e fast (200ms), maggiore è il valore, più lenta è l'animazione:

javascript.fadeOut('slow' o 'fast');

Se non si specificano parametri - non ci sarà animazione, gli elementi verranno nascosti istantaneamente:

javascript.fadeOut();

È anche possibile passare come secondo parametro una funzione di easing, e come terzo parametro una funzione di callback - che verrà eseguita al termine dell'animazione. Entrambi i parametri sono opzionali:

javascript.fadeOut(durata, [funzione di easing], [funzione di callback]);

È possibile passare al metodo varie opzioni, sotto forma di un oggetto JavaScript, contenente coppie chiave: valore:

javascript.fadeOut(opzioni);

Un tale oggetto può trasmettere i seguenti parametri e funzioni - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. La descrizione di questi parametri è disponibile per il metodo animate. Ad esempio, impostiamo la durata e la funzione di easing:

javascript.fadeOut( {duration: 800, easing: easeInSine} );

Esempio

Nel seguente esempio, cliccando sul pulsante #hide l'elemento con #test verrà nascosto utilizzando il metodo fadeOut, e cliccando sul pulsante #show - verrà mostrato, con fadeIn. Imposteremo anche la velocità su 1000ms:

html<button id="hide">nascondi</button>
<button id="show">mostra</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#show').on('click', function() {
  $('#test').fadeIn(1000);
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000);
});

Esempio

Nel seguente esempio, al termine dell'animazione quando si mostra l'elemento #test, visualizzeremo un messaggio con il testo '!', e quando si nasconde con il testo '?':

html<button id="hide">nascondi</button>
<button id="show">mostra</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#show').on('click', function() {
  $('#test').fadeIn(1000, function() {
    alert('!');
  });
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000, function() {
    alert('?');
  });
});

Vedi anche