animate top working in FF not IE
http://www.hooplah.net/dev/slider/index3.html
If you click the link in FF you will see that when you press "PLAY" the arrow image animates from the top like it is supposed to... but does not show up in IE.
Please help? This could be a jQuery or CSS issue...
JQ:
-
<script type="text/javascript">
$(document).ready(function(){
$("a#play").click(function(){
$("#imageBack").animate({
top:"0px"
}, 600);
});
});
</script>
HTML:
-
<div id="sliderDivDemo">
<img src="common/images/demoImage3.png" id="demoImage" width="307" height="334" />
<div id="imageBack">
<div id="imageBackRight">
<img src="common/images/backBtn.gif" />
</div>
</div>
</div>
<div id="controls">
<a id="play"><font color="#99CC66">PLAY</font></a>
</div>
CSS:
-
a {cursor:pointer; }
body { margin:0px; padding:0px; }
#sliderDivDemo { float:left; cursor:pointer; margin:60px 0px 0px 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:307px; z-index:3; }
#imageBackRight { padding-top:9px; float:right; }
#controls { clear:both; }
HELP PLEASE!!