In questo articolo vedremo come realizzare una nostra implementazione del metodo fadeIn() di jQuery utilizzando solo JavaaScript. Data la natura sperimentale del nostro esempio, sarà interessante notare l'effetto finale nei vari browser. Vediamolo insieme.
Il nostro metodo sarà associato ad ogni elemento HTML tramite la prototipizzazione dell'interfaccia nativa di riferimento:
if (typeof HTMLElement.prototype.fadeIn !== 'function') {
HTMLElement.prototype.fadeIn = function(speed, callback) {
var element = this;
element.style.opacity = 0;
element.style.display = 'block';
var i = 0.00;
var counter = 0;
var interval = Math.round(speed / 100);
var timer = setInterval(function() {
i += 0.01;
counter++;
if (counter == 100) {
clearInterval(timer);
callback();
}
element.style.opacity = i;
}, interval);
};
}
Abbiamo prima impostato l'opacità a zero e quindi resettato la proprietà display dell'elemento. Come in jQuery, il metodo accetta come parametri la velocità dell'animazione e una funzione di callback da eseguire ad animazione completata.
Creiamo un timer che incrementa gradatamente l'opacità dell'elemento da 0 a 1. Dato che gli step sono 100, usiamo un contatore per tenere traccia del numero di passaggi. Quindi blocchiamo il timer e invochiamo la funzione di callback.
Esempio d'uso:
var test = document.getElementById('test');
test.fadeIn(1000, function() {
alert('Complete!');
});
Potete visionare l'esempio finale in questa pagina.