jQuery css opacity problem in IE7-8

[eberdome]

Hello Everyone,

I was curious if i could get some help. I'm using a script that changes the opacity of a link to change from 0 to 1 onmouseover. Everything works fine in FF, Safari, Chrome. Even IE9(beta). IE7 and 8 (dont care about 6) the menu has an opacity problem. I'm pretty sure this is because IE7-8 do not support css opacity, they support filter. So i think this is the problem, i could be wrong though. Any advice for me? If you to think its because of that. is there any way to rewrite this to make it work in IE7-8?

Thanks for your time! Code below

 $(function() { $("ul#menu span").css("opacity","0"); $("ul#menu span")
.hover(function () { $(this).stop().animate({ opacity: 1 }, '700'); }, 
function () { $(this).stop().animate({ opacity: 0 }, '700'); }); });

You can see the problem if you got to: http://experiencemediaonline.gorillaonemedia.com/ and hover over the menu at the top, you will see it show up with white letters and a horrible outline! This happens in IE7-8

[rnd me]

instead of using opacity css, use jQuery's cross-browser access, .fadeTo():

$("ul#menu span").fadeTo(0)

see http://api.jquery.com/fadeTo/ for more

[eberdome]

this is what i changed it to, now its not working at all, did i do something wrong??

$(function() { $("ul#menu span").fadeTo(0); $("ul#menu span")
.hover(function () { $(this).stop().fadeTo({ 1 }, '700'); }, 
function () { $(this).stop().fadeTo({ 0 }, '700'); }); });

thx for the reply!

[rnd me]

{ 1 } should be 1, { 0 } should be 0...

[venegal]

There's no reason not to use .css(). It uses the same cross-browser safe implementation .animate() does.

Older versions of IE having a problem with changing the opacity of 24-bit PNGs is a known problem. A possible workaround is to not change the opacity of the element itself, but of a parent element.

[eberdome]

I'm confused, how can this be done with my code?

[venegal]

You look into your HTML whether the thing you want to fade is already wrapped in another element you can use for fading, and if so, use that. If it's not, you can use jQuery's .wrap() method for that.

[rnd me]

Originally Posted by eberdome

I'm confused, how can this be done with my code?

you code would be fine if you made the final round of corrections i offered.

[eberdome]

rnd me,

I tried what you said but it didn't seem to work at all at that point. The following is what i tried:

$(function() { $("ul#menu span").hide(); $("ul#menu span").hover(function () { $(this).stop().fadeIn('slow'); }, function () { $(this).stop().fadeOut('slow'); }); });

Thanks

[rnd me]

it was canceling all animation of every span each time, i think only the animation of the current item should be canceled.

this version works individually on each span of the menu:

$(function() { 
    $("ul#menu span").hide().map(function(b,a){
        var that=$(a);
        that.hover(
          function(){that.stop().fadeIn ('slow');}, 
          function(){that.stop().fadeOut('slow');}
        );
    });
});

one thing that jumps out: it's impossible to hover over a hidden span, so consider removing .hide() ...

[eberdome]

i tried it, still no dice. why cant i add the IE opacity as well as have opacity:0;? (filter:alpha(opacity=0); etc)

[venegal]

I believe rnd me is just trying to get your code error-free and to make sense, but he is not addressing the IE opacity issue I talked about earlier.

This is not an issue about different browsers implementing different ways to change an element's opacity, because jQuery already consolidates those differences. The issue is the one I mentioned, that there are bugs in IE regarding fading 24bit PNGs, and the workaround would be to fade a containing element instead.