...

View Full Version : A little Javascript Animation



ruggeddesign
10-24-2006, 06:37 PM
Well, my first post was a lie. I didn't need any help. But as long as I had already started an animation thread, let me share this code with you.

First I generate a bunch of paragraphs (var newPara). I give them these attributes:



newPara.onclick=clickTheLinkPlease;
newPara.onmouseover = animatePara;


I then created the functions:



function animatePara()
{
var paraElement = this; var paraId = paraElement['id'];
paraElement.setAttribute('className','animate');
animateThis(paraId);
}

function animateParaBack()
{
var paraElement = this; var paraId = paraElement['id'];
paraElement.setAttribute('className','unanimate');
}

function animateThis(paragraphId)
{
var allParas = document.getElementsByTagName('p');
for(var i=0; i < allParas.length; i++)
{
var paraElement = allParas[i]; var paraId = paraElement['id']; var paraClass = paraElement['className'];
if(paraId == paragraphId)
{
var currentPadPx = paraElement.style.paddingTop;
var currentPadNum = currentPadPx.substring(0,(currentPadPx.length-2));



if(paraClass=="animate" && parseInt(currentPadNum) < 15)
{
var newPadNum = parseInt(currentPadNum)+1;
var newPadPx = newPadNum+"px";

paraElement.style.paddingTop = newPadPx; paraElement.style.paddingBottom = newPadPx;
}

if(paraClass=="unanimate" && parseInt(currentPadNum) > 5)
{
var newPadNum = parseInt(currentPadNum)-1;
var newPadPx = newPadNum+"px";

paraElement.style.paddingTop = newPadPx; paraElement.style.paddingBottom = newPadPx;
}

setTimeout('animateThis('+paraId+')',5);
}
}
}


It works. It's not exciting, but it works. What's impressive about this to me is that it's possible . . . I am excited.

VortexCortex
10-25-2006, 06:25 AM
Want to see some animation with a purpose?

Check out my SnackMan (http://www.vortexcortex.com/games/) game written in Javascript.

ruggeddesign
10-25-2006, 08:36 AM
Nice.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum