Как исправить проблему с прозрачностью IE ClearType + jQuery в этом скрипте? - PullRequest
Новая
       14

Как исправить проблему с прозрачностью IE ClearType + jQuery в этом скрипте?

3 голосов
/ 21 апреля 2010

У меня довольно распространенная проблема (или, похоже, после некоторого поиска в Google ...), когда IE мешает как жирный текст, так и прозрачные pngs при анимации прозрачности с помощью jQuery.

Вы можете просмотреть образец здесь: http://dev.gentlecode.net/dotme/index-sample.html (очевидно, только в IE)

Я видел некоторые сообщения в блоге, в которых говорилось, что исправление - это удаление атрибута фильтра, но я не уверен, как применить его к используемому сценарию, так как я получил его из учебника и все еще изучаю 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, имеющими пиксельные уродливые границы, такие как жирный шрифт?

Заранее спасибо за помощь!

Ответы [ 3 ]

1 голос
/ 21 апреля 2010

Вы можете вставить это так:

Изменить эту строку / утверждение: 

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.

0 голосов
/ 14 июля 2011

Вы можете решить эту проблему во время анимации, а не только потом, применив стиль background-color:#fff к контейнеру в css (или к элементу, если он является контейнером).

Я получил этот совет от Странный Дзен Javascript & ndash; IE жирный текст + проблема непрозрачности .

Это прекрасно решило мою проблему с IE7. Кроме того, даже без использования цвета фона, вы можете исправить проблему после анимации, не мешая с фильтром, просто удалив свойство opacity css, когда элемент будет полностью виден, ala element.css({opacity: ''});.

0 голосов
/ 21 апреля 2010

Я запустил образец страницы на (Vista) IE8, совместимости IE8, Google Chrome 4.1 и Firefox 3.5.9 - если хотите, я могу также сделать XP и Win 7 - но пока все они работают в похожая мода.

Проблема может быть с IE6 (я думаю), потому что есть известные проблемы с IE6 и прозрачными pngs в IE6, Google с:

ie6 fix png fix

для множества исправлений, включая (что является вторым в приведенном выше поиске в Google и первое в поиске говорит, что это лучшее решение, чем его):

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

Что касается размещенного вами примера jquery, если он все еще не работает с обходными путями IE6 / png, опубликуйте html, который вы используете, с jquery, чтобы его можно было отладить.

...