Having trouble with fadeIn and fadeOut in IE8 with jQuery

Question

Guys,

Here is my site: http://www.dreamweddinggroup.com/redesign and I'm having a hell of a tough time figuring out why in gods name my fadeIn, fadeOut and corner() functions won't work in IE8. They were working for a time, but now they have broken and I can't for the life of me figure it out. Can anybody see anything that would cause the problem here?

To see what I'm talking about, if you were to click on the "About Us" link at the bottom of the page, you should see the text fade in. Then if you were to click on "Why Dream Wedding Group", the "About Us" text should fade out, and when it fades back in, you would see the new text.

Thank you,

Joe

Answer 1

I'm finding that IE8 has terrible performance using fadeIn myself with just a small image or text area. I think the engine is basically very bad at alpha blending! Because you're trying to fade fullscreen images, the performance is so slow that you just don't see the fade. In my case, I'm seeing CPU usage rocket to between 50% and 100% even on fairly powerful desktop with a decent graphics card. My client is having problems because every time this fade happens (every 5 seconds or so), video that is also playing starts skipping and being generally unstable.

Another site I'm working on is http://www.urstreams.com , if you hover over the boxes you will see a description appear also using fadeIn. If you mouse over all the boxes at once, so all the descriptions are appearing and disappearing at the same time, all the animations grind to a halt and CPU again rockets skyward.

Bit of a nightmare really, but at this stage I would recommend against any alpha blending animation in IE. The common theme in all these cases seems to be that blending is occurring over images. Perhaps this is the problem, as common jQuery samples and possibly tests / benchmarks tend to focus on basic scenarios such as plain text appearing over plain background tests?

Answer 2

I too have noticed this phenomenon with IE 8, though it seems to occur no matter what my element is floating above. I had an empty 4x4 px DIV that i was fading in and out on an interval (interval at 400ms, then element.fadeIn(100).fadeOut(500)) to debug element positioning and it was completely obliterating one of my cores! It took me a while to figure out why IE was constantly hitting 50% CPU while Chrome and Firefox barely broke a sweat -- I figured I had a rogue greedy loop somewhere until I scanned across my interval.

Fire up IE and your task manager and head over to http://www.hv-designs.co.uk/tutorials/jquery/all.html for a little test. Sort your running processes by CPU desc and watch IE rise to the top on every test (20-40+% of my 1.2 GHz dual-core Intel SU2300 for the duration of the fade +/- a few hundred ms), even for the simple text paragraph! Running the same test in Firefox or Chrome doesn't even break 10% usage for me.

Answer 3

Hey I was having the same trouble. I was trying to fadeOut an IE image and fade something new in like so :

$(".edit_photo_link").click(function(){
  $(this).fadeOut("slow", function(){
    $(this).next(".throb").fadeIn("slow");
  });
});

Which wasn't working. But the FadeIn was! So guessing that this was processor getting eaten up by IE8 (not IE7), I just changed it to this :

$(".edit_photo_link").click(function(){
  $(this).fadeOut("slow", function(){
    $(this).hide();
    $(this).next(".throb").fadeIn("slow");
  });
});

And IE8 users don't get that extra loving of animation.

Answer 4

I had similar problems with a stack of absolutely positioned divs. I wanted to simultaneously fade one out and fade one in. Code that worked fine in FF/Safari would not work in IE8: The fadeOut() wouldnt fade, only the fadeIn(). I found solution was to use CSS to set the z-index of the element to be faded-in to be at the top of the stack:

$('#fadeoutdiv').css({zIndex:90}).fadeOut(2000);
$('#fadeindiv').css({zIndex:99}).fadeIn(2000);