Slide 21
Slide 21 text
var distances = [100, 10]; // total x/y distances to move
var duration = 1000; // animate for one second
var steps = [(distances[0]/duration), (distances[1]/duration)];
var timeElapsed = 0;
var element = document.querySelector('.myElement');
var interval = setInterval(function () {
if (timeElapsed > duration) {
// cancel interval
clearInterval(interval);
return;
} else {
// move element
element.style.top = parseInt(element.style.top, 10) + steps[0] + 'px';
element.style.left = parseInt(element.style.left, 10) + steps[0] + 'px';
// increase time elapsed
timeElapsed += 50;
}
}, 50)
21