Metodo fadeIn

Il metodo fadeIn mostra fluidamente gli elementi nascosti, rendendoli opachi. Nascondere gli elementi è possibile con il metodo fadeOut, rendendoli trasparenti.

Sintassi

Visualizzazione in un tempo dato, 400ms di default:

javascript.fadeIn(durata);

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

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

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

javascript.fadeIn();

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

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

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

javascript.fadeIn(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 la potete vedere per il metodo animate. Ad esempio, impostiamo la durata e la funzione di easing:

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

Esempio

Nel seguente esempio, cliccando sul pulsante #hide l'elemento con #test verrà nascosto usando il metodo fadeOut, e cliccando sul pulsante #show - verrà mostrato, con il metodo fadeIn. Imposteremo inoltre la velocità a 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, dopo il completamento dell'animazione durante la visualizzazione dell'elemento #test, visualizzeremo un messaggio con il testo '!', e durante la nascondita 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