Jquery fades in IE

[Bubbleboy]

I wrote some jquery code for my websites navigation bar that displays a drop down menu by fading it in. It works in chrome, and firefox, but, like usual, not in Internet Explorer. I am using the fadeIn and fadeOut effects and everything seems in order. I even added the name tag because IE seems to like it for some reason. What happens, is IE shows the drop down, but it doesn't fade at all. The fade is two seconds, and it does go through the two seconds because it takes that long before it will dissapear after your mouse leaves it, but the problem is it won't fade. Just display, and not display, which is boring. Here is some of my HTML code.

<li id="backgroundtrigger" name="backgroundtrigger">Change Background
			<ul id="backgrounds" name="backgrounds">
				<li><center><img src="docs/PlasmaThumb.gif" height="50" width="75" onclick="changeBackground('docs/Plasma.gif');"></center></li>
				<li><center><img src="docs/StarFieldThumb.gif" height="50" width="75" onclick="changeBackground('docs/StarField.gif');"></center></li>
				<li><center><img src="docs/BlocksThumb.gif" height="50" width="75" onclick="changeBackground('docs/Blocks.gif');"></center></li>
				<li><center><img src="docs/DropletsThumb.gif" height="50" width="75" onclick="changeBackground('docs/Droplets.gif');"></center></li>
				<li><center><img src="docs/JellyFishThumb.gif" height="50" width="75" onclick="changeBackground('docs/JellyFish.gif');"></center></li>
			</ul></li></div>
		</ul>
		<script type="text/javascript">
		
		
			$("#abouttrigger").mouseenter(function animateaboutin(){
				$("#about").fadeIn(2000);
			});
			$("#abouttrigger").mouseleave(function animateaboutout(){
				$("#about").fadeOut('slow');
			});
			$("#backgroundtrigger").mouseenter(function animatebackgroundsin(){
				$("#backgrounds").fadeIn(2000);
			});
			$("#backgroundtrigger").mouseleave(function animatebackgroundsout() {
				$("#backgrounds").fadeOut('slow');
			});
			
		</script>

and in my css document

#nav { position: absolute; top: 0; left: 0; width: 95%; list-style-type: none; background-image: url('navback.png'); background-repeat: repeat-x; color: orange; }
#nav a { color: orange; text-decoration: none; }
#nav a:visited { color: orange; }
#nav li { float: left; position: relative; padding: 1em;  }
#nav li ul li { clear: left; padding: .5em; }
#nav li ul {  display: none; text-decoration: none; position: absolute; left: 5%; top: 100%;  }
#about li { text-decoration: none; list-style-type: none; background: lightgreen; width: 100%; }
#backgrounds li { list-style-type: none; }
#backgrounds li { background: lightgreen; width: 100%; }
#nav a:hover { color: green; border: dashed black 1px; }

Thanks in advance!

[fobos]

Im just going to try and get the ball rolling with "hopefully" other people helping. Well one thing i do know that you shouldnt put a name on a jquery function because thats the whole point of the structure. Im im wrong, hey oh well.

You

$("#someid").mouseleave(function animatebackgroundsout() {

Should be

$("#someid").mouseleave(function() {

Ummm... if that doesnt work, what IE are you using? If its 8 or so, there might be a compatibility button by the refresh button. See if that works when you use it? Well just trying to narrow down the problems. Excuse me if you already know this, just never know when you reply to someone.

[Bubbleboy]

Thank you for replying. I tried the compatibility button, but that screws my webpage up so badly that it isn't worth it. Yes, it does fade with compatability on, but the css stuff is all messed up. Also, i named them so that if i ever wanted to do some ajax thing, I could unbind them and mess with it. I did the name thing because on an old script i did it only worked if name was used instead of id.