如何在此脚本中修复IE ClearType + jQuery不透明度问题？ [英] How to fix IE ClearType + jQuery opacity problem in this script?

问题描述

我有一个相当普遍的问题（或者看起来，经过一些谷歌搜索...），IE使用粗体文本和透明png，同时使用jQuery动画不透明度。

I'm having a rather common problem (or so it seems, after some googling around...) with IE messing both bold text AND transparent pngs while animating opacity using jQuery.

您可以在此处查看示例： http：//dev.gentlecode。 net / dotme / index-sample.html （显然只出现在IE中）

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

我看过一些博客帖子说修复是删除过滤器属性，但我不知道如何将它应用于我正在使用的脚本，因为我从教程中得到它并且仍在学习jQuery ...

I've seen some blog posts saying the fix is to remove the filter attribute but I'm not sure how to apply it to the script I'm using since I got it from a tutorial and am still learning jQuery...

脚本如下：

$('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还有像粗体一样的难看的边框？

I would appreciate if someone could go over it and show me how to fix the opacity issue. Will the filter method also fix the trouble I'm having with transparent pngs having pixelated ugly borders like the bold type as well?

提前感谢所有的帮助！

推荐答案

你可以这样输入：

更改此行/声明：

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。这将循环遍历元素并删除过滤后的集合，如果您在IE中，则取消过滤器样式属性。

Normally I don't condone $.browser use, but in this case it is an IE bug and jQuery is applying filter because it's IE as well. This will loop through the elements and remove the filtered set and take off the filter style attribute if you're in IE.

这篇关于如何在此脚本中修复IE ClearType + jQuery不透明度问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！