Okay, whizzkid :)
NOTE: all the stuff below should work on IE
The main function you need in an animation is setTimeout("function_name",speed)
Just to get you familiar with setTimeout(), just in case you don't already know it...
Say you've got this function:
<script>
function writeit(){ //this function will just write text into a textbox
document.forms.theform.thetextbox.value="I am the text.";
}
</script>
<body>
<form name="theform">
<input type="text" name="thetextbox">
<input type="button" value="write it" onClick='setTimeout("writeit()",5000)'>
</form>
</body>
press the button, and the writeit function will execute after 5 seconds. the speed passed to the setTimeout function is in milliseconds.
So, you want to do an animation. I'll just give u one for gliding down. You can change it to move upwards by changing y and yMax.
For an animation, the setTimeout() function has to be placed withIN the main function.
This way, setTimeout() works rather like a loop, executing the function every whatever-milliseconds-you've-decided.
<script>
var y=0;// this HAS to be OUTSIDE the function
function animateIt(){
var theDivision=document.getElementById('animatedDiv'); // get required division
var yMax=250;// the division's maximum y coordinate -- it'll travel down till here
if(y<=yMax){ // as long as y is less than yMax, y should keep increasing
theDivision.style.top=y;// assign y to theDivision's top y-coordinate
y=y+10; // the y-coordinate increments each time by 10 pixels
// if you increase the increment, it makes action a little less smooth and faster
setTimeout("animateIt()",1); // this will force the function to repeat itself every
//1 millisecond, until the if condition turns false
}
}
</script>
<body>
<input type="button" value="Move!" onClick="animateIt()">
<div id="animatedDiv" style="position:absolute; top:10; left:100;background-color: orange; width:30%; height:30%"></div>
</body>
Why does y=0; need to be outside the function? because setTimeout will work as a loop, executing the whole animateIt() function every 1 millisecond. If we put y=0 within the function, y will always be re-assigned 0 every time the function runs again, it'll never get past getting increased to 10.
To make the division go up instead of down, change y and yMax, to say, 250 and 0, respectively. You'll also have to change y=y+10 to y=y-10.
After the animation, you can probably see that the value of y is now that of yMax. so the division won't move again if you press the button, because the if condition will always be false ... y will not be y<=yMax. To see it move again, you'll have to reload the page so that the value of y is 0 once more.
To fix this problem you can add "y=0" to the onClick part of the button:
onClick="y=0;animateIt();"
That was simple enough, I hope ... I can't remember my own capacity of understanding when I was your age ... that was a while ago. :D
Here's a function so you can change the speed by passing it as an argument into the function.
<script>
var y=0;// no animation for you if you accidentally stuff this within the function,
// like I did, a million times
function animateIt(speed){// you can change the speed by passing whatever number as an argument
var theDivision=document.getElementById('animatedDiv');
var yMax=250;
var temp='setTimeout("animateIt('+speed+')",'+speed+');';//temp holds the
// setTimeout statement
if(y<=yMax){
theDivision.style.top=y;
y=y+10;
eval(temp); // execute the statement stored in the temp variable
}
}
</script>
<body>
<input type="button" value="Move!" onClick="y=0;animateIt(1)">
<!-- we're passing on the speed of the animation to a movement every one millisecond .. you can change it-->
<div id="animatedDiv" style="position:absolute; top:10; left:100;background-color: orange; width:30%; height:30%"></div>
</body>
Hope it helps :thumbsup: . Now you can enjoy seeing your friends' eyes go goo-goo...;)