Animate this …

Fri, 20th Jun, '08

In a javascript world ruled by prototype and scriptaculous, all visual effects & animations in web pages are effected by them. But DIY still means Do-It-Yourself. Lets waste no time smelling the perfume and cut to the flesh …

function animateThis(fxargs, fxtp)
{
var fxargsstr = ”, argseparator = ”;
var fxname = fxargs.callee.toString();
fxname = fxname.substr(‘function ‘.length);
fxname = fxname.substr(0, fxname.indexOf(‘(‘));
for(var i = 0; i < fxargs.length; i++)
{
fxargsstr = fxargsstr + argseparator + “‘” + fxargs[i] + “‘”;
argseparator = ‘,’;
}
fnstr = fxname +'(‘+fxargsstr+’)’;
setTimeout(fnstr, fxtp);
}

What is that?? Hmmm … I guess I am seeing settimeout on steroids. Put:

animateThis(arguments, <a span of your choice measured in milliseconds>);

in a function body and that function gets called every that many milliseconds with the exact argument set supplied to it as was supplied when the function was first called. So a Fade-In function in javascript using this function would look like this:

function fadeIn(elementID)
{
var el = document.getElementById(elementID);
var opac = el.style.opacity; //read the current opacity value of the target element
if(opac < 1) //if not reached full opacity
{
opac = parseFloat(opac) + 0.05; //increase the current opacity value
el.style.opacity = opac.toString();
animateThis(arguments, 20); //call this function every 20 milliseconds
}
}

and just call this on a div with opacity set as 0 and an ID of lets say ‘testdiv’, with something like:

<a href=’#’ onclick=”javascript:fadeIn(‘testdiv’);”>bring in</a>

and see the div come into view. Geekness.

The example will only work on Firefox but the function animateThis() has been tested on FireFox 2-3, IE 6-7, Safari, Opera. In case you find some issue, tell me and I will have things set right.

And yeah, CS students, this is not recursion. This is a timer.