jQuery using .animate() fails to do ANYTHING in IE8
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 re开发者_JAVA百科moved - problem solved)
Ideas?
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;
}
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.
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.
精彩评论