Animate Function not working properly in IE.
Hey all,
Temp site can be seen at:
http://www.hooplah.net/dev/slider/index2.html. This works perfectly in FF. So to see how it should operate, open the page in FF.
To see how it should not operate, open in IE (preferably IE7 as there is no PNG fix applied yet for IE6).
Most animations are just done using a div wrapper (sliderWrapper) whos margin is animated to where it needs to be. Inside the div wrapper are 3 divs that are the 3 sections that need to be displayed (#sliderDivStory, #sliderDivDemo, and #sliderDivMovieMaking)
There are 3 animations that are triggered by jQuery functions.
1)
when you click play - #sliderDivDemo slides to the right, sliding #sliderDivMovieMaking off the visible stage and sliding #sliderDivStory onto the visible stage.
2) Click Back - THis will slide everything back to normal position
3) Whenever the #sliderDivDemo is on the right there is a back button that animates down from the top of the #sliderDivDemo
4) when the "watch the demo" box is click it extends its width to take up the whole 2 boxes, and the back arrow animates down.
In IE the back arrow never animates down, and the margin issues are inconsistent as the jump/dissapear/slide too far or not far enough.
here is the jQuery:
-
<script type="text/javascript">
$(document).ready(function(){
$("a#play").click(function(){
$("#sliderWrapper").animate({
marginLeft: "0px"
}, 600);
$("#imageBack").animate({
top:"0px"
}, 600);
$("#sliderDivDemo").animate({
width:"307px"
}, 600);
});
$("#demoBack").click(function(){
$("#sliderWrapper").animate({
marginLeft: "-328px"
}, 600);
$("#imageBack").animate({
top:"-30px"
}, 600);
$("#sliderDivDemo").animate({
width:"307px"
}, 600);
});
$("#demoImage").click(function(){
$("#sliderWrapper").animate({
marginLeft: "-328px"
}, 600);
$("#sliderDivDemo").animate({
width:"635px"
}, 600);
$("#imageBack").animate({
top:"0px"
}, 600);
});
});
</script>
The HTML/CSS can be seen in the source but here it is anyways:
-
<div id="wrapper">
<div id="sliderVisible">
<div id="sliderWrapper">
<div id="sliderDivStory"><img src="common/images/video2.png" width="307" height="334" /></div>
<div id="sliderDivDemo">
<img src="common/images/demoImage2.png" id="demoImage" width="307" height="334" />
<div id="imageBack">
<div id="imageBackRight">
<img src="common/images/backBtn.gif" id="demoBack" />
</div>
</div>
</div>
<div id="sliderDivMovieMaking"><img src="common/images/movieMaking2.png" width="307" height="334" /></div>
</div>
</div>
<div id="sliderRight">jsbdfgijab aubv qehr vh erovhe arhva fv ahdf vadjh fvha dfhv ah fhd fvoahd fbvha dfbh adfhb adhf b</div>
<div id="controls">
<a id="play"><font color="#99CC66">PLAY</font></a>
</div>
</div>
-
a {cursor:pointer; }
body { margin:0px; padding:0px; }
#videoBkTest { position:absolute; top:0px; left:0px; width:635px; height:500px; z-index:1; }
#wrapper { position:absolute; top:0px; left:0px; background-image:url(../images/bodyBk.jpg); background-repeat:no-repeat; z-index:2; }
#sliderRight { float:left; margin-left:25px; width:200px; }
#sliderWrapper { width:10000px; margin-left:-328px; }
#sliderVisible { overflow:hidden; width:635px; float:left; }
#sliderDivDemo { float:left; cursor:pointer; margin-left:21px; width:307px; height:334px; background-image:url(../images/demoBk.png); position:relative; overflow:hidden; z-index:2; }
#imageBack { cursor:pointer; position:absolute; top:-30px; width:100%; z-index:3; }
#imageBackRight { padding-top:9px; float:right; }
#demoBack { }
#sliderDivMovieMaking { float:left; margin-left:21px; }
#sliderDivStory { float:left; }
#controls { clear:both; }
If someone could help me with these IE problem i would greatly appreaciate it.