Setting opacity with jquery not working in IE8, but works in IE7

Question

My code:

$('.diff a').css('opacity', .5);

Works in IE7, firefox, and chrome, correctly making the anchor elements appear faded, but not in IE8.

I'm using jquery 1.4.4

EDIT: Here is a test page showing problem http://jsfiddle.net/KUJYF/

Answer 1

I ran across this same situation while trying to animate opacity for fading in and out a span element. Under IE7, animating the span worked flawlessly. Under IE9, same story. But, under IE8, there was no animation.

Thanks to the comments to the original question posed above, I found that by setting the CSS style of the span to inline-block, animation started working in IE8, which leads me to believe that IE8 may not support opacity on inline elements (at least, not the way that jQuery 1.4.4 implemented it).

Here's the sample I used for testing: http://jsfiddle.net/ddYuJ/2/

Answer 2

Why are you using opacity at all? Why not just use a lighter color to simulate the effect and not have the overhead the opacity property introduces.

Answer 3

Use fadeto

http://api.jquery.com/fadeTo/