Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Location
    California
    Posts
    201
    Thanks
    30
    Thanked 8 Times in 8 Posts

    jQuery css opacity problem in IE7-8

    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

    Code:
     $(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

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,376
    Thanks
    11
    Thanked 592 Times in 572 Posts
    instead of using opacity css, use jQuery's cross-browser access, .fadeTo():

    Code:
    $("ul#menu span").fadeTo(0)
    see http://api.jquery.com/fadeTo/ for more
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Location
    California
    Posts
    201
    Thanks
    30
    Thanked 8 Times in 8 Posts
    this is what i changed it to, now its not working at all, did i do something wrong??

    Code:
    $(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!

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,376
    Thanks
    11
    Thanked 592 Times in 572 Posts
    { 1 } should be 1, { 0 } should be 0...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #5
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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.

  • #6
    Regular Coder
    Join Date
    Dec 2010
    Location
    California
    Posts
    201
    Thanks
    30
    Thanked 8 Times in 8 Posts
    I'm confused, how can this be done with my code?

  • #7
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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.

  • Users who have thanked venegal for this post:

    oesxyl (02-15-2011)

  • #8
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,376
    Thanks
    11
    Thanked 592 Times in 572 Posts
    Quote Originally Posted by eberdome View Post
    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.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #9
    Regular Coder
    Join Date
    Dec 2010
    Location
    California
    Posts
    201
    Thanks
    30
    Thanked 8 Times in 8 Posts
    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:

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

  • #10
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,376
    Thanks
    11
    Thanked 592 Times in 572 Posts
    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:

    Code:
    $(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() ...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #11
    Regular Coder
    Join Date
    Dec 2010
    Location
    California
    Posts
    201
    Thanks
    30
    Thanked 8 Times in 8 Posts
    i tried it, still no dice. why cant i add the IE opacity as well as have opacity:0;? (filter:alpha(opacity=0); etc)

  • #12
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •