1

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/

Kyle
  • 21,377
  • 37
  • 113
  • 200
  • @Robert doctype is ` `. BTW, I found this related question: http://stackoverflow.com/questions/3452868/opacity-in-ie8-works-on-p-but-not-on-a. – Kyle Dec 10 '10 at 03:00
  • @Kyle did that solution not work (setting `display: inline-block`)? If you can't figure it out, I'll defer to: http://dowebsitesneedtolookexactlythesameineverybrowser.com/ – Bryan Downing Dec 10 '10 at 03:07
  • 1
    @Kyle I just tested in IE8 using `display: inline-block` and it appeared to work. So, good job finding the answer yourself! – Bryan Downing Dec 10 '10 at 03:41

3 Answers3

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.

Macy Abbey
  • 3,877
  • 1
  • 20
  • 30
  • yea i could do that, opacity would've been easier than redefining different lighter versions of my styles for :hover, :visited, etc. – Kyle Dec 10 '10 at 02:58
  • You could also use a microsoft specific alpha filter: http://webdesign.about.com/od/css3/a/aa121306.htm – Macy Abbey Dec 10 '10 at 03:02
  • I would recommend using styles, it's faster and cleaner then a jquery application of an opacity filter to mimic what the styles are intended to do. – Macy Abbey Dec 10 '10 at 03:03
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/

saluce
  • 13,035
  • 3
  • 50
  • 67
0

Use fadeto

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

Ives.me
  • 2,359
  • 18
  • 24