Question

i have a problem with the style manipulation of an HTML object in Chrome.

Here is an example:

var a = document.createElement('div');

a.style.position = 'absolute';
a.style.display = 'block';
a.style.top = '300px';
a.style.left = '50px';
a.style.height = '100px';
a.style.width = '10px';
a.style.backgroundColor = '#000000';
a.style.zIndex = '200';

a.aW = 10;

var a2 = document.createElement('div');

a2.style.position = 'absolute';
a2.style.display = 'block';
a2.style.top = '200px';
a2.style.left = '50px';
a2.style.height = '100px';
a2.style.width = '10px';
a2.style.backgroundColor = '#000000';
a2.style.zIndex = '200';
a2.id = 'a';

a2.aW = 10;

document.getElementsByTagName('body')[0].appendChild(a);
document.getElementsByTagName('body')[0].appendChild(a2);

var b = window.setInterval(function () {
    a.aW += 10;
    if (a.aW > 1600) {
        window.clearInterval(b);
    }
    a.style.width = a.aW + 'px';
}, 13);

$('#a').animate({
    width: '1600'
}, 2000, 'linear');

The object which is animated through the setInterval Function is sometimes working slowly if it is run on a normal website.
The strange thing is, that the Object animated by jQuery runs smoothly oO.

(Sorry for my bad English).

Answer 1

First of all, interval timers are not guaranteed to run exactly at the time you set them for, particularly if the time is a very short interval. In many browsers, there is a minimum time value allowed for setInterval(). So, if that minimum time is greater than 13ms or if many of the interval calls come in longer than 13ms, your animation that has a fixed number of steps will take longer and go slower.

Second of all, any reliable animation must use a tweening algorithm where it calculates the steps it wants to use and then upon each step, it re-evaluates (by comparing the system time with the expected system time for this step number) whether it’s behind schedule or ahead of schedule and adjusts the future step size accordingly so that it will complete on time and appear to be going the appropriate speed. That’s what jQuery’s animation does. That’s what your setInterval() animation does not do.

Here is a reference article on self-adjusting timers for animations that run a predictable amount of time and another article on minimum times for timers.

Here’s an article and code on tweening and another piece of code that does tweening.

Also, for simplicity’s sake, please change this:

document.getElementsByTagName('body')[0]

to this:

document.body