Hey everyone. I'm new to jQuery and and I love it! However being a newbie it takes me some time to work through issues but it helps me learn. I wrote some simple code to have a div start on the right side of the page and move to the left upon clicking the div (#go). The transition of sliding from right to left works fine in Firefox but doesn't in IE, Chrome, or Safari. In those 3 browsers it goes from right to left instantly without sliding across. Any help? Code is below. Thanks!
<head>
<style>
div.block {
position: absolute;
background:url(../images/Background-Main.jpg);
right:-300px;
top:0;
background-color: #ffffff;
width: 800px;
height: 100%;
margin: 0;
}
#go {
position:absolute;
left:0;
top:200px;
}
.second { position:absolute; top:200px; left:0; height:433px; width:100%; display:none; background:url(../images/mid-bg.png) repeat-x top left;}
</style>
<script>
$(document).ready(function(){
// Start animation
$("#go").click(function(){
$(".block").animate({
"left": "-1%"
}, 4000);
$("div.second").delay(3300).fadeIn(1700);
});
});
</script>
<div id="go"><img src="images/go.png" /></div>
<div class="block"></div>
<div class="second"></div>