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

Ответ 1

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

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

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

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

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

Ответ 2

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

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

EDIT: Incorporated joeformd исправление для обратных вызовов.

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

Ответ 3

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

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

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

Ответ 4

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

Ответ 5

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

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

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

jQuery fadeIn/fadeOut IE cleartype glitch

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

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

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

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

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

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

Ответ 6

<!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.

Ответ 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);

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

Ответ 8

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

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

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

Ответ 9

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

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

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

Ответ 10

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

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

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