Jump to content

Simple Jquery animation and IE7


Drongo_III

Recommended Posts

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
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.