[jQuery] Need help with animations in IE
Hi, this is one of my firsts experiences with jQuery and I have a
little problems already.
The problem explanation is that I want to apply an effect to a css
layer (and it is applied) that when you click on a special div, it
moves some layers. It works perfectly with Firefox, but not in IE...
I leave here the css code and the jQuery script...
////////////////////////////// jQuery
<script type="text/javascript">
$(document).ready(function(){
var selected_opt = 0;
var speed = 300;
$("#contentbox4").animate({
opacity: 0
});
$("#footer_lt").click(function () {
$("#contentbox1").animate({
opacity: 0,
left: "-500px"
}, speed );
$("#contentbox2").animate({
left: "0px"
}, speed );
$("#contentbox3").animate({
left: "311px",
}, speed );
$("#contentbox4").animate({
opacity: 100,
right: "0px"
}, speed );
selected_opt = 1;
});
$("#footer_rt").click(function () {
$("#contentbox1").animate({
opacity: 100,
left: "0px"
}, speed );
$("#contentbox2").animate({
left: "311px"
}, speed );
$("#contentbox3").animate({
left: "622px"
}, speed );
$("#contentbox4").animate({
opacity: 0,
right: "-500px"
}, speed );
});
});
</script>
////////////////////////////// CSS
#contentbox1 {
position:absolute;
left:0px;
top:80px;
width:278px;
height:439px;
}
#contentbox2 {
position:absolute;
left: 311px; /* 336px; <= Para el master950px */
top:80px;
width:278px;
height:439px;
}
#contentbox3 {
position:absolute;
right:0px;
top:80px;
width:278px;
height:439px;
}
#contentbox4 {
position:absolute;
right:-500px;
top:80px;
width:278px;
height:439px;
}
You dont have to rewrite the code if you don't want (I don't want to
annoy anyone) but if you can explain me the error... ^^
Thanks anyway!