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> 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.