animate() not working in internet explorer

Question

I have a script that when button is hovered will animate it so it pops up, unfortunately i can't get it working in IE at all. It's using jQuery and works in all other browsers.

Please see the fiddle: http://jsfiddle.net/JHS5g/1/ I've tried to mimic my actual code as much as possible and have therefore left in some of the surrounding code.

$("#main-nav div").hover(function() {
  $(this).stop().animate({
    top: "-40px"
  }, { queue: false, duration: 200 });
}, function() {
  $(this).stop().animate({
    top: "0px"
  }, { queue: false, duration: 200 });
});

I actually think it's a html or css error thats causing it to break because when i test the jquery code on it's own it works but i just can't pinpoint it.

I've noticed the fiddle is some of the html markup in red, indicating an error? but again i just can't see it.

Thanks in advance for any help

Answer 1

You can get it to work by adding display: inline-block to the div you are animating

I've updated your JS Fiddle

Answer 2

Remove the jQuery. Updated fiddle

What you are attempting to do is extraordinarily simple in CSS using a basic :hover psuedoclass and transition CSS property.

The best part? It'll even work in older versions of IE (down to IE7 - before that :hover won't work on elements that aren't <a>), although it will not animate in IE8 or below.

That's okay though, because transitions are eye-candy, NOT functionality, and therefore not required. Plus it provides a little bonus for people who are smart enough to not disable Windows Update.