Note(s):
AddEvent source code can be found here.
$ function source code can be found here.
Original post can be found here.
I while ago I posted a snippet on how to create a general purpose animation function in JavaScript. The function was simple and to the point; yet, lacking a lot of details. In this post I will add the ability to specify a callback function once the animation has ended.
We begin with the original 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++;
}
}
}
//Here is where our callback code will go
}
The callback function will be provided as an extra member of the params variable (a JSON object).
Example:
var params = {
speed:0,
start:0,
end:0,
func:function (i) {},
callback:function(){}
};
Adding a callback is simple:
We check to see if the parameter exists (if not we just ignore it)
if (typeof (params.callback) != 'undefined') {
}
Then, we need to ensure that the parameter is a function
if (typeof (params.callback) != 'undefined') {
if ((typeof (params.callback) == 'function')) {
}
}
Finally, we need to delay the execution until our animation has completed and we can do that by adding a timeout.
//Callback
if (typeof (params.callback) != 'undefined') {
if ((typeof (params.callback) == 'function')) {
window.setTimeout(function () {
params.callback(); //Execute callback
},(speed * timer));
}
}
Complete 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++;
}
}
//Callback
if (typeof (params.callback) != 'undefined') {
if ((typeof (params.callback) == 'function')) {
window.setTimeout(function () {
params.callback(); //Execute callback
},(speed * timer));
}
}
}
}
Usage Demo:
window.onload = function () {
DeveloperCaster.AddEvent("b", "click", function () {
DeveloperCaster.Animate({
speed: 2500,
start: 100,
end: 300,
func: function (i) { $('i').style.width = i + "px"; },
callback: function () {
//Callback
DeveloperCaster.Animate({
speed: 2500,
start: 20,
end: 200,
func: function (i) { $('i').style.height = i + "px"; }
});
}
});
});
};
Compress this code at: http://www.jscompressor.com
Hey! thanks for great review. It was easy to read, but I'd like to add that if your business needs to be updated try software development services.
ReplyDelete