How to fix IE ClearType + jQuery transparency issue in this script?

Question

I have a fairly common problem (or it seems after some search queries ...) with IE inserting both bold text and transparent png when animating opacity using jQuery.

You can view the sample here: http://dev.gentlecode.net/dotme/index-sample.html (obviously only in IE)

I saw blog posts saying that the fix is ​​to remove the filter attribute, but I'm not sure how to apply it to the script that I am using since I got it from the tutorial and I'm still learning jQuery ...

The script looks like this:

$('ul.nav').each(function() {
    var $links = $(this).find('a'),
        panelIds = $links.map(function() { return this.hash; }).get().join(","),
        $panels = $(panelIds),
        $panelWrapper = $panels.filter(':first').parent(),
        delay = 500;

    $panels.hide();

    $links.click(function() {
        var $link = $(this),
            link = (this);

        if ($link.is('.current')) {
            return;
        }

        $links.removeClass('current');
        $link.addClass('current');

        $panels.animate({ opacity : 0 }, delay);
        $panelWrapper.animate({
            height: 0
        }, delay, function() {
            var height = $panels.hide().filter(link.hash).show().css('opacity', 1).outerHeight();

            $panelWrapper.animate({
                height: height
            }, delay);
        }); 

        return false;
    });

    var showtab = window.location.hash ? '[hash=' + window.location.hash + ']' : ':first';

    $links.filter(showtab).click();

});

, - , . , png, , ?

!

Answer 1

:

/:

var height = $panels.hide().filter(link.hash).show().css('opacity', 1).outerHeight();

:

var filtered = $panels.hide().filter(link.hash).show().css('opacity', 1);
if ($.browser.msie)
  filtered.each(function() { this.style.removeAttribute('filter'); });
var height = filtered.outerHeight();

$.browser, IE, jQuery , IE. filter, IE.

Answer 2

(Vista) IE8, IE8, Google Chrome 4.1 Firefox 3.5.9 - , XP Win 7, .

IE6 ( ), IE6 png IE6, google :

ie6 png

, ( Google, , , ):

http://24ways.org/2007/supersleight-transparent-png-in-ie6

jquery, , - IE6/png, html, jquery, .

Answer 3

, , background-color:#fff css ( , ).

I got this advice from The Strange Zen of Javascript - IE bold text + opacity problem .

This fixed my IE7 problem nicely. In addition, even without using a background, you can fix the problem after the animation by not starting the filter by simply removing the css opacity property after the element is fully visible, ala element.css({opacity: ''});.