By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
457,897 Members | 1,600 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 457,897 IT Pros & Developers. It's quick & easy.

animation function not running... please help

P: 16
I am trying to have a function start with a timer and then switch to another function. However, it is not working at all. Anyone know whats goin on?


[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script type="text/javascript" src="animation.js">
</script>


<script type="text/javascript" language="javascript">


function startnow () {
setContents ("counter",5);

var timer1= setTimeout("setContents('counter',4)",1000);
var timer2= setTimeout("setContents('counter',3)",2000);
var timer3= setTimeout("setContents('counter',2)",3000);
var timer4= setTimeout("setContents('counter',1)",4000);
var timer5= setTimeout("setContents('counter',0)",5000);
var timer6= setTimeout("setContents('counter', 'Go!')",6000);
var timer7= setTimeout("animation()",7000);

}


function setContents(id,val) {
document.getElementById(id).innerHTML = val;
}

function animation() {

/* return the x-coordinate of the layer named layername */

function getX(layername)
{
var theLayer = getElement(layername);
if (layerobject)
return(parseInt(theLayer.left));
else
return(parseInt(theLayer.style.left));
}


/* set animation speed and step */

var step = 3;
var framespeed = 35;

/* set animation boundaries */

var maxleft = 100;
var maxright = 600;

/* move left until boundary */

function left()
{
var currentX = getX('rightcar');
if (currentX > maxleft)
{
currentX-=step;
setX('rightcar',currentX);
move=setTimeout("left()",(1000/framespeed));
}
else
clearTimeout(move);
}

/* move right until boundary */

function right()
{
var currentX = getX('leftcar');
if (currentX < maxright)
{
currentX+=step;
setX('leftcar',currentX);
move=setTimeout("right()",(1000/framespeed));
}
else
clearTimeout(move);
}
}



</script>
</head>

<body>

<div id="counter" style="border: 1px solid black; width: 100px; height: 100px; position: absolute; left: 450px; top: 10px; font-family: Arial; font-size: 25px;">
</div>

<div id="explosion" style="border: 1px solid black; width: 100px; height: 100px; position: absolute; left: 450px; top: 300px;">
boom!
</div>

<div id="leftcar" style="border: 1px solid black; width: 210px; height: 72px; position: absolute; left: 10px; top: 300px;">
<img src="blue_car.gif" width="200" height="72" /></div>

<div id="rightcar" style="border: 1px solid black; width: 210px; height: 72px; position: absolute; left: 800px; top: 300px;">
<img src="yellow_car.gif" /></div>

<div id="controls" style="border: 1px solid black; width: 50px; height: 100px; position: absolute; left: 450px; top: 500px;">
<form action="" name="form" method="get" />
<input type="button" value="start" onclick="startnow();" />

<input type="button" value="reset" />

</form>
</div>



</body>
</html>[/HTML]
Feb 20 '07 #1
Share this Question
Share on Google+
2 Replies


P: 16
btw the animation is based on the library from:
http://javascriptref.com/examples/ch15-ed2/15-501.htm

if that helps..
Feb 20 '07 #2

acoder
Expert Mod 15k+
P: 16,027
You cannot have functions within a function as you have declared.

What functions are you trying to run? e.g. left 300px, then right, then up, etc.

Whatever you decide, call those functions separately in animation(), e.g.
Expand|Select|Wrap|Line Numbers
  1. function animation() {
  2. left();
  3. right();
  4. }
Feb 20 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.