Manipulating opacity during animation with jQuery and its effects in IE

By Thomas

Changing opacity on an element dynamical with jQuery often gives strange and unwanted effects in IE. It depends on the sites structure and css. It normally appears after an element has been faded out, and is faded in again. Text colour disappears, backgrounds looks strange opacity is wrong. Several things can happen.

JQuery doesn’t reset the opacity in IE the right way after fading out an element. This relates both to the functions “fadeOut” and “animate “. This is easily fixed by setting the css to empty string using $(’.yourelement’).css(’opacity’,”) after the effect is finished.

  $('.foo').fadeOut(
    'fast',
    function(){
      $(this).css('opacity','');
    }
  );

Tags: , , , ,

This entry was posted on Thursday, May 28th, 2009 at 14:43 and is filed under Miscellaneous, XHTML / JavaScript / CSS. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.

Comments are closed.