Random Posted March 19, 2007 Share Posted March 19, 2007 I'm looking for a way to animate different objects, so when you press a button ALL 4 obejects will move in different directions and when you press stop they all return to their starting positions. My main problem is finding a way to adapt what I have to more than one objects. I tried to copy and paste the code again and just add a number to the function/variable/etc. and it didn't, it may be because I would not have a way to start them all at once. So if anyone has a suggestion or maybe a site that has a good tutorial for this I'd really appreciate it. Thanks.Here's what I have so far animating just one of the objects:<html><head><style type="text/css">#div0 { position: absolute; font-family: Rockwell; font-size : 5em; color: #6bfdb3; z-index: 1;}#div1 { position: absolute; font-family: Rockwell; font-size : 5em; color: #6bfdb3; z-index: 2;}#div2 { position: absolute; font-family: Rockwell; font-size : 5em; color: #6bfdb3; z-index: 3;}#div3 { position: absolute; font-family: Rockwell; font-size : 5em; color: #6bfdb3; z-index: 4;}</style><script language="javascript" type="text/javascript">var Hchange=50;var Hstart = 312;var Hstop = 600;var Vstart = 102;var Vstop =100;var Vchange = 50;var animationDelay = 75;var timerID="";function getObject(){ return document.getElementById('div3'); } function shiftIT (x,y,z){ var xStr; var yStr; var zStr; xStr=x.toString(); yStr=y.toString(); zStr=z.toString(); getObject().style.left = xStr +"px"; getObject().style.top = yStr +"px"; getObject().style.zindex = zStr; Hstart = Hstart+Hchange; Vstart = Vstart+Vchange; if (Hstart >=Hstop) {Hstart = 0; } if (Vstart >=Vstop) {Vstart = 0; } }function delayIT (stopTM){ var j; var count = 0; count = 0; for (j=1; j<=stopTM; j=j+1) { count = count+1; }}function stopSide(){ clearInterval(timerID); timerID="";} function moveSide() { if (timerID == "") {timerID = setInterval ("shiftIT(Hstart,Vstart,2)",animationDelay);} }</script></head><body><br /><input id="button" name="button" type="button" onclick="moveSide()" value="Move" style="top:250px;left:50px;z-index:0" /><input id="reset" type="button" value="Reset" /> <div id="div3" style="left: 312px; top: 102px">e</div> </body></html>If anybody has any Link to comment Share on other sites More sharing options...
PrateekSaxena Posted March 19, 2007 Share Posted March 19, 2007 See this >> http://w3schools.invisionzone.com/index.php?showtopic=9500 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now