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.

Advertisements

One Response to “Animate this …”

  1. Mark Says:

    I tried this but it didn’t work. Code page below:

    fadein.htm

    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);
    }

    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
    }
    }

    xxx

    bring in


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: