jQuery fadeIn оставляет текст не сглаженным в IE7

Question

Почему это происходит? Есть обходные пути?

JQuery:

$(function() {
   $('p.quote').fadeIn(3000);
});

HTML:

<p>someone said:</p>
<p class="quote">&ldquo;lorem ipsum&rdquo;</p>
<p>someone else said:</p>
<p class="quote" style="display: none;">&ldquo;magna carta&rdquo;</p>

Answer 1

Существует известная ошибка с IE и функциями fadeIn / fadeOut и их влиянием на текстовые элементы. Проверьте информацию здесь:

http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/

Похоже, что моя оригинальная ссылка с тех пор умерла. Обновлено с другим решением из комментариев:

http://malsup.com/jquery/cycle/cleartype.html

Обходной путь - удалить свойство 'filter' элемента в функции обратного вызова после завершения fadeIn ().

Answer 2

Я нашел лучшее, более общее решение на http://jquery.malsup.com/fadetest.html.

Я взял это и адаптировал в отдельный файл JavaScript для включения в страницы, использующие методы jQuery fade * ().

//
//  jQuery IE Fade Fix
//
//  Adapted from code found at http://jquery.malsup.com/fadetest.html.
//
//  This is only needed for IE 7 and earlier, so this is best added to your page using IE's conditional comments
//  (http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx) as follows:
//      <!--[if lt IE 8]><script type="text/javascript" src="jquery-ie-fade-fix.js"></script><![endif]-->
//
(function($) {
    $.fn.fadeIn = function(speed, callback) {
        if ($.isFunction(speed) && callback == undefined) {
            callback = speed;
            speed = 'normal';
        }
        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) {
        if ($.isFunction(speed) && callback == undefined) {
            callback = speed;
            speed = 'normal';
        }
        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) {
        if ($.isFunction(speed) && callback == undefined) {
            callback = speed;
            speed = 'normal';
        }
        return this.animate({opacity: to}, speed, function() {
            if ( to == 1 && $.browser.msie )
            {
                this.style.removeAttribute('filter');
            }
            if ( $.isFunction(callback) )
                {
                callback.call(this);
            }
        });
    };
})(jQuery);

РЕДАКТИРОВАТЬ: Включено joeformd исправление для обратных вызовов.

EDIT2: Добавлено исправление для углового случая, когда скорость не определена, но обратный вызов - -Tomi

Answer 3

Из того, что я помню, устанавливаемый атрибут фильтра вызывает это. После завершения fadeIn удалите атрибут фильтра из элемента.

$('p.quote').fadeIn(2000, removeFilter);

function removeFilter() {
  $('p.quote').removeAttr("filter");
}

Answer 4

Просто примените цвет фона к точному элементу, который выцветаете ... насколько я помню, он не сработает для детей, если вы примените к родителю, поэтому он должен быть на этом самом элементе, который становится псевдонимом.

Answer 5

Похоже, что принятый ответ теперь имеет неработающую ссылку. Я думаю, что та же самая информация теперь доступна в http://blog.wolffmyren.com/2009/05/28/jquery-fadeinfadeout-ie-cleartype-glitch/.

Чтобы сохранить информацию в StackOverflow, вот содержимое этой ссылки:

Спасибо Бенджамину Михаилу Новаковичу для этого исправления!

jQuery fadeIn / fadeOut IE глюк с типом ошибки

Во время использования библиотеки jQuery javascript сегодня на работе я заметил глюк под IE7. Когда исчезает HTML узел с .fadeIn () и .fadeOut () функции в jQuery, IE сбрасывает рендеринг оконного типа окон; который приводит к очень уродливому тексту. это проблема, кажется, очень распространена, но ни у кого нет хорошего решения для проблема.

Наиболее распространенный способ решения этой проблемы - удаление фильтра CSS. приписывать. В обычном JavaScript это будет выглядеть так:

document.getElementById('node').style.removeAttribute('filter');

и в jQuery это будет выглядеть так:

$('#node').fadeOut('slow', function() {
   this.style.removeAttribute('filter');
});

через Бенджамина Михаила Новаковича » jQuery fadeIn / fadeOut IE cleartype глюк.

Answer 6

Вот так я избавился от своего уродливого блеклого текста в IE 8: вместо этого используйте fadeTo и доведите его до 99%!

Поэтому это сработало для меня:

$(function() {
   $('p.quote').fadeTo("slow",0.99);
})

Answer 7

Добавьте это в свой JS. Это исправляет ошибку и поддерживает правильную область. При добавлении в jQuery он по-прежнему проходит все модульные тесты:

(function($){
    $.each(['fadeIn', 'fadeOut'], function(i, method){
        var _fn = $.fn[method];
        $.fn[method] = function(easing, callbackå, cancel) {
            if ($.isFunction(easing)) {
                callback = easing;
                easing = 'normal';
            }
            return _fn.call(this, easing, function(){
                jQuery.browser.msie && !cancel && this.style.removeAttribute('filter');
                (callback || $.noop).call(this);
            });
        }
    })
})(jQuery);

Написано мной:)

Answer 8

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Добавьте это поверх ваших HTML-документов. Работает на IE 8.07xxxx. Я не уверен, что этот метод работает на IE 7.

Answer 9

Ни одно из этих решений не работало для меня, либо они были неподходящими, например, я не хочу менять свое объявление DTD HTML5 только для одной ошибки IE, и я не могу изменить свой цвет фона, поскольку он используется в другая анимация.

Я также использую jQuery .animate, так что это может быть немного не по теме, но решение, которое отлично работало, было это . Это хорошая статья, но основной код:

$('#sample').animate(
    {opacity:1.0},
    500,
    function() {
        $(this).css('filter','');
    }
);

Answer 10

Ни одно из этих решений не помогло мне исчезнуть в div с использованием анимации jQuery, так как фильтр был в элементе style. Вот что мне нужно было сделать:

$(div).animate({opacity: 1}, 800, function() {
   $(this).removeAttr('style');
});

Очевидно, это удалит любые другие встроенные стили, которые у вас могут быть.