jQuery using .animate() fails to do ANYTHING in IE8

Question

So, it's official: I hate Internet Explorer. Yes, all bloody versions of it. :-D

So, I didn't think I was doing anything complicated here, but apparently I am. I have a bunch of list items in an unordered list styled for a navigation menu, and in Firefox, Chrome, Safari, and Opera, things work fine. What is supposed to happen is when you hover a navigational item, it should animate some growth and animate a background color change.

Nothing happens in Internet Explorer 7/8.

I think it's just tied to the animate function, since if I swap .animate with .css, it works.

http://project-cypher.net/wtf/ (*url removed - problem solved)

Ideas?

Answer 1

If I change the 'padding' : '6px 12px ' to 'padding' : '12px' it seems to work. Can you try this and report if it doesn't work on your end?

It's not perfect but it does something, and gets you a little closer to fixing it.

EDIT: Dang, wonder why not. Worked here. IE8. IDK, maybe you've got the solution from the other answer.

Answer 2

Change your animation properties a bit using backgroundColor, paddingTop and paddingBottom, this should work:

$('ul.navigation li a').css('padding','0px 12px');
$('ul.navigation li a').hover(function() {
  $(this).stop().animate({
      backgroundColor : '#336699',
      'padding-top': 6,
      'padding-bottom': 6
    }, 150 );
}, function() {
  $(this).stop().animate({
      backgroundColor: '#660000',
      paddingTop: 0,
      paddingBottom: 0
    }, 150 );
});

This CSS:

ul.navigation li a {
    padding: 6px 12px;
    color: #fff;
    text-decoration: none;
    background: #600;
}

Answer 3

I ran into this problem myself, the other day. I couldn't figure out why IE didn't properly animate the objects.

The answer is simple, though: use jQuery UI

jQuery UI includes an improved color plugin that actually works.

Check out the other neat things in jQuery UI while you're at it - buttons, dialogs, progress bars, tabs, etc.