I've been trying to get this content fader to work in Internet Explorer 7.0.5 all day to no avail.

It works perfectly in all the other browsers (Firefox 3.5.3, Opera 10.0 and Safari 4.0.2) but as usual our good ol' pal Internet Explorer just doesn't want to play nice.

Also note I'm a JS and JQuery Newby

Here is the site:
http://dru-era.com/test/Druera/index.html

The first fade is triggered via the contact us button (mail icon at the bottom left corner, next to facebook and twitter icons), which takes us to the contact us page.

Then from there, the next fade is triggered via the Yellow-Green Gradient DRUERA banner, which takes us back to the home page.

Internet Explorer 7 doesn't display either of these content replacement/fading effects properly, although the other browsers do.

All the Javascipt is in the source code, but its this bit that controls the actual fading:

Code:
<script type="text/javascript">
	$(document).ready(function(){
$("#contact_us").click(function(){

		$("#home").animate({
				opacity: 0.0
				}, 600 );
		
				$("#home").css({
					display: "none"
				});	
		
		
		

		$("#contact_us_content").animate({
				opacity: 1.0
				}, 600 )
					.css({
					display: "block"
				});	
					
		$("#contact_us_content").css({
					display: "block"
				});	
		
			
});
});
</script>

<script type="text/javascript">
	$(document).ready(function(){
$("#druera_banner").click(function(){
				
				
				$("#home").css({
					display: "block"
				});	
		
		$("#home").animate({
				opacity: 1.0
				}, 600 );
		

		
		

		$("#contact_us_content").animate({
				opacity: 0.0
				}, 600 )
					.css({
					display: "none"
				});	
					
		$("#contact_us_content").css({
					display: "none"
				});	
		
			
});
});
</script>
I've been working on this site non-stop for a week and to come so close to finishing it, only to have Internet Explorer throw a fit is very frustrating.

Any help would be greatly appreciated,

Thanks,

Dru