Drongo_III Posted May 24, 2011 Share Posted May 24, 2011 Hi Guys I'm trying to make a simple Jquery animation but IE7 is giving me some display issues. As you can see from the code below I simply have a containing div with overflow set to hidden. Within this is a large div containing two videos. When the button is clicked it simply animates the inner div left and right by adjust the margin, which displays either one of the videos. The issue is that the animation works flawlessly in firefox but in IE7 when the animation is taking place the videos momentarily spills outside of the containing div and flickers in and out of view outside of the margin of the container. I'm a bit of a loss to explain why this is happening or how to correct it as jquery is somethnig i only use very seldom. So if someone could offer some advice to correct this it would be appreciated. Thanks Drongo <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn1").click(function(){ $("#moving_container").animate({marginLeft:"-300px"}); }); $(".btn2").click(function(){ $("#moving_container").animate({marginLeft:"0px"}); }); }); </script> </head> <body> <div style="width: 500px; height: 500px; border: 1px solid #000; overflow: hidden"> <!-- containing div --> <div id="moving_container" style="width: 1000px; height: 500px; border: 1px solid #000; margin-top: 100px;"> <!-- Large inner div --> <div style="width: 400px; height 300px;border: 1px solid #000; float: left;"> <!--video 1 div --> <iframe width="400" height="300" src="http://www.youtube.com/embed/4TpUQD2W_Ps?rel=0" frameborder="0" allowfullscreen></iframe> </div> <div style="width: 400px; height 300px;border: 1px solid #000;float: left;"> <!--video 2 div --> <iframe width="400" height="300" src="http://www.youtube.com/embed/4TpUQD2W_Ps?rel=0" frameborder="0" allowfullscreen></iframe> </div> </div> </div> <button class="btn1">Animate</button> <button class="btn2">Reset</button> </body> </html> Link to comment https://forums.phpfreaks.com/topic/237343-simple-jquery-animation-and-ie7/ Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.