CODEWITHSUNDEEP
javascriptjqueryinternet-explorer
Dynde
Dynde

Reputation: 2674

Choppy/crappy animation in IE using jquery opacity + animate

I realize there are multiple questions about the animation of opacity - so before anyone goes all RTFM on me - I checked, and I couldn't find one with my specific problem :)

Consider the following code:

$("#contentTabs li").live({
     mouseenter: function () {
          $(this).find("span.tabTitle").stop(true, true).animate({
             marginTop: "-25px"
          }, 250);
     },
     mouseleave: function () {
          $(this).find("span.tabTitle").stop(true, true).animate({
             marginTop: "-10px"
          }, 500);
     }
});

This works quick and fast in both IE and other browsers - (if you're wondering, all it does is sliding caption at the bottom of a picture).

Now, I threw this in:

 $("#contentTabs li span.tabTitle").css({ opacity: 0.70 });
 $("#contentTabs li span.tabTitleText").css({ opacity: 1 });

Just before the live-declaration. And it's still quick and fast in other browsers but IE.

Why would this opacity change so much? And is there anything to be helped, besides telling IE browsers not to do the fading?

EDIT:

Sorry - basic question-skills are failing me, IE version tested: 8

Upvotes: 1

Views: 658

Answers (1)

RoToRa
RoToRa

Reputation: 38390

Opacity isn't a trivial thing to do for computers, because it requires quite a bit of calculation, and the JavaScript and rendering engines of IE 8 are no where nearly as optimized as those of current browsers.

Basically there is nothing you can do there, other than avoid unnecessary special effects in IE <9.

Upvotes: 1

Related Questions