Question

I’m struggling to get my head around such simple Math, well at least it seems it should be simple.

I’m basically trying to mirror what jQuery’s .animate does, but to no luck.

Here’s a simplified version of what I have so far:

var args = {
  speed: 1000, // 1 second.
  left: 65 // distance.
}, rot, step;

// Terrible math.
rot = step = (((args.left / args.speed) * 10) - 0.10);

var t = setInterval(function() {
  if(elem.style.left >= args.left) {
    clearInterval(t);
    return;
  }
  rot += step;
  elem.style.left = rot;
}, 10);

Please excuse any illogical code (or math), I’ve been messing around for a good few hours and totally lost my sanity.

Answer 1

Edit:

Here’s the way I would do it.

var start_time = Date.now();
// Get the starting time in milliseconds

var t = setInterval(function() {

    var delta_time = Date.now() - start_time;
    // Get time that has elapsed since starting

    if (delta_time >= 1000) {
        // if it's been a second

        clearInterval(t);
        // Stop the timer

        elem.style.left = args.left + 'px';
        // Set the element to exactly the value it should be (avoids having it set to a float value)

        return;
    }

    elem.style.left = delta_time * args.left / args.speed + 'px';
    // Move the element according to how much time has elapsed

}, 10);​

This method has a few advantages. For example, you can adjust the interval to make it more or less smooth, and it won’t mess up the animation.

The reason why your solution was taking longer than one second is because of how you used setInterval. setInterval doesn’t account for the time your code takes to run, so the total time is always increased by a bit. You can fix this by using delta timing (like in my example).