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> Link to comment https://forums.phpfreaks.com/topic/253946-how-to-simultaneously-animate-two-divs-in-jquery/ Share on other sites More sharing options...
Alex Posted December 28, 2011 Share Posted December 28, 2011 What are you trying to do?.. Link to comment https://forums.phpfreaks.com/topic/253946-how-to-simultaneously-animate-two-divs-in-jquery/#findComment-1301915 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 Link to comment https://forums.phpfreaks.com/topic/253946-how-to-simultaneously-animate-two-divs-in-jquery/#findComment-1301917 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.