Question

So I am workng on a little project, mostly to help me learn better javascript and I’m having a little problem. I can do animations just fine, but my problem is.. I’m trying to figure out the math necessary to calculate the amount of change in pixels to move each step of the animation. So say my div is 450px wide and I’m saying animate({ width : 600, duration : 2000 }). that leaves 150px of total movement, but how much movement to I do for each frame if I’m calling my setTimeout function every 3 milliseconds. I know the solution is probably simple but for some reason, maybe just because I have been beating my head on a wall for while writing this whole thing and now I can’t think enough to figure it out. I can show code examples if anyone needs. Thank you for the help in advance.
As per request here is the code I have so far to do the animation…

animate : function(params, duration) {
    if(!params) {
        return this;
    } else {
        this.current = this._defCurrent;
        console.log(this.current);
        var time = (duration) ? duration : this.slow;
        var target;
        for(var index in params) {
            if(index == 'queue') {
                if(params[index]){
                    this.animQueue = true;
                } else {
                    this.animQueue = false;
                }
            } else {
                var current = parseFloat(this.getStyle(index));
                if(current < params[index]) {
                    target = params[index] - current;
                    animDirection = '+';
                } else {
                    target = current - params[index];
                    animDirection = '-';
                }
                totalMovement = target / time;
                animObj = {type : index, target : target, move : totalMovement, direction : animDirection, duration : time};
                this.setAnimQueue(animObj);
            }
        }
    }
    this.setTheTimeout();
},
setAnimQueue : function(obj) {
    var that = this;
    for(var i = 0, amt = (obj.duration * this.fps); i < amt; i++) {
        var fun = this.wrapFunction(that.doAnim, this, [obj.type, obj.move, obj.direction]);
        this.queue.push(fun);
    }
},
setTheTimeout : function() {
    var that = this;
    this.interValAmt = setInterval(function() {
        that.deQueue()
    }, this.fps);
},
doAnim : function(type, amount, direction) {
    var totalAmount = eval(parseFloat(this[type]()) + direction + amount);
    if(this.elem.style[this.toCamelCase(type)]) {
        this[type](totalAmount);
    } else {
        this[type](totalAmount)
    }
    return this;
}

Answer 1

You have distance, and you have duration. Dividing them gives speed. Simply multiply the speed by the time increment to get the distance increment.