1

I've put a site together involving a fair amount of opacity / fading effects, but one part (the menu bar) isn't displaying correctly in IE8, and for the life of me I can't work out why. It works fine in higher versions of IE, and in proper browsers.

The site is up at

http://stevorasp.no-ip.org

and the full code is accessible from there, but as far as I can make out it's related to this section of JS:

    $('a').fadeTo(0, 0);
    $('a').addClass('hidden');
    $('#about_cont').fadeTo(0, 0);
    $('#gigs_widget').addClass('hidden');
    $('#music_widget').addClass('hidden');
    $('#contact_cont').addClass('hidden');
    ....
    setTimeout(function(){
      $('a').removeClass('hidden');
      $('a').fadeTo(1200, 0.7);
      $('#about_cont').fadeTo(1200, 0.6);
    }, 11700);

I'm probably missing something really obvious here, but am stumped.

The bit that's confusing me is that the content parts of the site work fine with the opacity effects in IE8, using the following as an example

    $('#about').click(function() {
      $('#about_cont').fadeTo(0,0);
      $('#gigs_widget').animate({"opacity": 0}, 600);
      $('#music_widget').animate({"opacity": 0}, 600);
      $('#contact_cont').animate({"opacity": 0}, 600);
      setTimeout(function(){
        $('#gigs_widget').addClass('hidden');
        $('#music_widget').addClass('hidden');
        $('#contact_cont').addClass('hidden');
      $('#about_cont').removeClass('hidden');
      }, 590);
      setTimeout(function(){
        $('#about_cont').animate({"opacity": 0.6}, 600);
      }, 610);
    });
stevo__80
  • 11
  • 2

2 Answers2

0

The main problem with IE7 & 8 is that they don't properly support opacity effects. You can use CSS in IE 8 like 

filter: alpha(opacity=70);

However when you use function like .fadeIn() etc in jQuery as far as I am aware it removed the transparency effects.

There are a few possible work arounds mentioned in this post: Opacity CSS not working in IE8

Be aware that in IE8 most of these only work on block level elements.

Community
  • 1
  • 1
JanR
  • 6,052
  • 3
  • 23
  • 30
  • I was wondering if that was the case, but the content parts of the site do fade in and out correctly - even though the menu bar isn't displaying the links are active and function as expected with the fades. – stevo__80 Jun 20 '13 at 01:11
  • Looks like you are using .animate() for the content bits and not fadeIn(), maybe try animating them rather than using the fadeIn function and see if that solves it. – JanR Jun 20 '13 at 01:29
  • So the animate to opacity 0 works? but when you try to animate back to 0.7 it doesn't? or do you have any elements that you are animating back to opacity 0.7 that work in IE8? – JanR Jun 20 '13 at 01:35
  • Yeah, other animates work. I've just changed the example in my second codeblock in the question to demonstrate (the final animate in there) – stevo__80 Jun 20 '13 at 01:41
0

Try to use the css zoom property on the element you want to animate. In your case, something like this i think:

a, a *, #about_cont{zoom:1;display:block}

I couldn´t test on fiddle because it simply doesn't support IE < 9.0

Pablo S G Pacheco
  • 2,550
  • 28
  • 28