IE distorting text in JQuery fade / opacity animation

Question

I realize this is well-trodden territory, but I can't get any of the recommended solutions on SO or other places to work.

I have a div, with text inside, that I want to fade out to 25% on a click and then fade in to 100% on a subsequent click. It works great in all browsers except IE (I'm testing in IE8). The problem: after fading the div back in, the text in IE is all jagged and incomplete (I think the correct term may be "not anti-aliased").

I've tried all the recommended solutions I can find. The most often recommended seems to be the one I include in the example below, which is to animate the opacity (instead of using fadeTo), apply the filter:alpha(opacity) for IE, and then remove the filter in a callback once the animate to 100% has completed. I've also tried (per other suggestions):

css background-color and no background-color (for the div)
various ways of removing the filter (see comments in the code below)
Making sure my div has a height, width and float:left

Here's the javascript:

    $(document).ready(function(){
    $("#fade_button").click(function(){
        $('#test_div').animate(
            {opacity:0.25},
            500,
            function() {
                $("#test_div").css('filter','alpha(opacity=25)');
            });
        });
    $("#unfade_button").click(function(){
        $('#test_div').animate(
            {opacity:1.0},
            500,
            function() {
                $("#test_div").css('filter','none'); // tried ('filter','') and document.getElementById("#test_div").style.removeAttribute("filter")
            });
        });
    });

Here's the css:

        div#test_div
        {
        float:left;
        width:1000px;
        height:200px;
        margin-left:50px;
        border:1px solid black;
        background-color:yellow;
        }

Thanks so much for any guidance!

"not anti-aliased" = aliased. – j08691 Feb 02 '12 at 17:27 — j08691, Feb 02 '12 at 17:27

score 1 · Accepted Answer · answered Feb 02 '12 at 18:11

The issue is IE adding a filter attribute. I use this plugin to remove it.

(function($) {
  $.fn.fadeIn = function(speed, callback) {
    return this.animate({opacity: 'show'}, speed, function() {
            if ( $.browser.msie )
            {
                    this.style.removeAttribute('filter');
            }
            if ( $.isFunction(callback) )
            {
                    callback.call(this);
            }
    });
  };

  $.fn.fadeOut = function(speed, callback) {
    return this.animate({opacity: 'hide'}, speed, function() {
            if ( $.browser.msie )
            {
                    this.style.removeAttribute('filter');
            }
            if ( $.isFunction(callback) )
            {
                    callback.call(this);
            }
    });
  };

  $.fn.fadeTo = function(speed, to, callback) {
    return this.animate({opacity: to}, speed, function() {
            if ( to == 1 && $.browser.msie )
            {
                    this.style.removeAttribute('filter');
            }
            if ( $.isFunction(callback) )
            {
                    callback.call(this);
            }
    });
  };
})(jQuery);

Then add it conditionally.

<!--[if IE]><script type="text/javascript" src="jquery-ie-fade-fix.js"></script><![endif]-->

Thanks very much, James. I ended up using the this.style.removeAttribute('filter') in an if($.browser.msie) conditional in my js on the page (in the callback), and it worked! — Jeff 131313, Feb 03 '12 at 04:45

IE distorting text in JQuery fade / opacity animation

1 Answers1