Basic JavaScript Animation Function

Note(s):
AddEvent source code can be found here.
$ function source code can be found here.

This function is really helpful to move or change states of a DOM object in a loop.

I will start by creating the DeveloperCaster namespace (using JSON).

var DeveloperCaster = {

        Animate: function (params) {

        }

}

The function will be called Animate and it will take the following set of parameters in JSON format:

Parameters:

Animation speed, start value, end value, and action function

Example:

    var params = {

        speed:0,

        start:0,

        end:0,

        func:function (i) {}

    };

Here is the function:

    var DeveloperCaster = {

        Animate: function (params) {

            var speed = Math.round(params.speed / 1000);

            var timer = 0;

            if (params.start > params.end) {

                for (var i = params.start; i >= params.end; i--) {

                 (function (i, _f, speed, timer) {

                   setTimeout(function () { _f(i); }, (timer * speed));

                 })(i, params.func, speed, timer);

                    timer++;

                }

            } else if (params.start < params.end) {

                for (var index = params.start; index <= params.end; index++) {

                 (function (i, _f, speed, timer) {

                   setTimeout(function () { _f(i); }, (timer * speed));

                 })(index, params.func, speed, timer);

                    timer++;

                }

            }

        }

    }

The idea here is to loop from the start value to the end value while executing and passing the step parameter to the anonymous function in every step of the loop.

Usage:

JavaScript:

window.onload = function () {

            DeveloperCaster.AddEvent("b", "click", function () {

            DeveloperCaster.Animate({

                speed: 2000,

                start: 0,

                end: 300,

                func: function (i) { $('i').style.height = i + "px"; }

            });

        });

…

Html :

<input name="b" type="button" value="Click" />

<p>&nbsp;</p>

<div id="i" style="border:1px solid #333333">

&nbsp;

</div>

Example: