IE искажает текст в анимации исчезновения / непрозрачности JQuery - PullRequest
Новая
       22

IE искажает текст в анимации исчезновения / непрозрачности JQuery

2 голосов
/ 02 февраля 2012

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

У меня есть div с текстом внутри, который я хочу постепенно уменьшить до 25% за клик, а затем увеличить до 100% при следующем щелчке. Он прекрасно работает во всех браузерах, кроме IE (я тестирую в IE8). Проблема: после возвращения div, текст в IE все неровный и неполный (я думаю, что правильный термин может быть «не сглаженный»).

Я перепробовал все рекомендуемые решения, которые могу найти. Наиболее часто рекомендуемым является тот, который я включил в приведенный ниже пример, который должен анимировать прозрачность (вместо использования fadeTo), применить фильтр: альфа (прозрачность) для IE, а затем удалить фильтр в обратном вызове, анимация до 100% завершена. Я также пытался (по другим предложениям):

  • css background-color и без фона (для div)
  • различные способы удаления фильтра (см. Комментарии в коде ниже)
  • Убедиться в том, что мой div имеет высоту, ширину и число с плавающей точкой: left

Вот код JavaScript: 

    $(document).ready(function(){
    $("#fade_button").click(function(){
        $('#test_div').animate(
            {opacity:0.25},
            500,
            function() {
                $("#test_div").css('filter','alpha(opacity=25)');
            });
        });
    $("#unfade_button").click(function(){
        $('#test_div').animate(
            {opacity:1.0},
            500,
            function() {
                $("#test_div").css('filter','none'); // tried ('filter','') and document.getElementById("#test_div").style.removeAttribute("filter")
            });
        });
    });

Вот CSS: 

        div#test_div
        {
        float:left;
        width:1000px;
        height:200px;
        margin-left:50px;
        border:1px solid black;
        background-color:yellow;
        }

Большое спасибо за любые советы!

1 Ответ

1 голос
/ 02 февраля 2012

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

(function($) {
  $.fn.fadeIn = function(speed, callback) {
    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) {
    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) {
    return this.animate({opacity: to}, speed, function() {
            if ( to == 1 && $.browser.msie )
            {
                    this.style.removeAttribute('filter');
            }
            if ( $.isFunction(callback) )
            {
                    callback.call(this);
            }
    });
  };
})(jQuery);

Затем добавьте это условно. 

<!--[if IE]><script type="text/javascript" src="jquery-ie-fade-fix.js"></script><![endif]-->
...