Prima dell'avvento di jQuery, le animazioni JavaScript venivano realizzate utilizzando i timer unitamente agli stili CSS degli elementi impostati tramite l'oggetto style. In questo articolo faremo un tuffo nel passato per realizzare l'effetto di un box che si espande e si contrae fino a scomparire. Se siete interessati a conoscere alcune tecniche inerenti le animazioni JavaScript dell'era pre-jQuery, potete consultare la guida di David Flanagan o il cookbook di Danny Goodman.
Partiamo da un semplice elemento HTML con i seguenti stili:
#test {
width: 0px;
height: 0px;
background: #f90;
overflow: hidden;
}
Dobbiamo operare sulla larghezza ed altezza dell'elemento utilizzando un contatore e due timer. Il primo timer incrementerà i valori di larghezza e altezza, mentre il secondo le decrementerà. Allo stesso tempo dobbiamo impostare un valore numerico come limite del contatore. Per il primo timer (espansione) sarà 150, mentre per il secondo (contrazione) sarà 0. Il contatore verrà incrementato e decrementato ogni volta di 10:
function Animator(element) {
var that = this;
this.element = document.getElementById(element) || null;
this.animate = function() {
var counter = 0;
var interval = setInterval(function() {
counter += 10;
that.element.style.width = counter + 'px';
that.element.style.height = counter + 'px';
if(counter == 150) {
clearInterval(interval);
var interval2 = setInterval(function() {
counter -= 10;
that.element.style.width = counter + 'px';
that.element.style.height = counter + 'px';
if(counter == 0) {
clearInterval(interval2);
}
}, 50);
}
}, 50);
};
}
Richiamiamo il nostro codice in questo modo:
window.onload = function() {
var animator = new Animator('test');
animator.animate();
};
Potete visionare l'esempio finale in questa pagina.