lenglain Posted December 28, 2011 Share Posted December 28, 2011 Hi guys, here is an example of what I want to do: http://cam-it.com/test.html But here is what happens when I try to do that with two divs http://cam-it.com/test2.html Why is this happening? here is the code for the first <!DOCTYPE html> <html> <head> <style> body { background-color:#000000; } #square{ width:356px; height:52px; border: 1px solid red; background-image:url(images/ANIMATEINS.png); background-repeat:no-repeat; position:relative; } #container{ margin:100px auto; width:356px; height:52px; background-image:url(images/ANIMATE.png); background-repeat:no-repeat; position:relative; border:1px solid blue; } #square2{ width:356px; height:52px; border: 1px solid red; background-image:url(images/ANIMATEINS.png); background-repeat:no-repeat; position:relative; } #container2{ margin:100px auto; width:356px; height:52px; background-image:url(images/ANIMATE.png); background-repeat:no-repeat; position:relative; border:1px solid blue; } #box { border: 1px solid #FF0000; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <div id="box"> <div id="container"> <div id="square"> </div> </div> <div id="container2"> <div id="square2"> </div> </div> </div> <script type="text/javascript"> var $square = $("#square"); bounce(); function bounce() { $square.animate({ left: "+=170" }, 1000, function() { /**new command**/ $square.animate({ left: "-=170" }, 1000, function() { bounce(); }) /**end command**/ }); } </script> </body> </html> And here is the code for the second: <!DOCTYPE html> <html> <head> <style> body { background-color:#000000; } #square{ width:356px; height:52px; border: 1px solid red; background-image:url(images/ANIMATEINS.png); background-repeat:no-repeat; position:relative; } #container{ margin:100px auto; width:356px; height:52px; background-image:url(images/ANIMATE.png); background-repeat:no-repeat; position:relative; border:1px solid blue; } #square2{ width:356px; height:52px; border: 1px solid red; background-image:url(images/ANIMATEINS.png); background-repeat:no-repeat; position:relative; } #container2{ margin:100px auto; width:356px; height:52px; background-image:url(images/ANIMATE.png); background-repeat:no-repeat; position:relative; border:1px solid blue; } #box { border: 1px solid #FF0000; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <div id="box"> <div id="container"> <div id="square"> </div> </div> <div id="container2"> <div id="square2"> </div> </div> </div> <script type="text/javascript"> var $square = $("#square"); bounce(); function bounce() { $square.animate({ left: "+=170" }, 1000, function() { /**new command**/ $square.animate({ left: "-=170" }, 1000, function() { bounce(); }) /**end command**/ }); } </script> <script type="text/javascript"> var $square2 = $("#square2"); bounce(); function bounce() { $square2.animate({ left: "+=170" }, 1000, function() { /**new command**/ $square2.animate({ left: "-=170" }, 1000, function() { bounce(); }) /**end command**/ }); } </script> </body> </html> Quote Link to comment Share on other sites More sharing options...
Alex Posted December 28, 2011 Share Posted December 28, 2011 What are you trying to do?.. Quote Link to comment Share on other sites More sharing options...
lenglain Posted December 28, 2011 Author Share Posted December 28, 2011 Hi I actually worked it out, I had used the same "Bounce" function in both scripts, so I called one Bounce2 for the second script. dumb mistake, but I'm still completely new at this. thanks Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.