Исправление проблемы IE Cleartype / Filter при анимации непрозрачности текста с помощью jQuery - PullRequest
Новая
       34

Исправление проблемы IE Cleartype / Filter при анимации непрозрачности текста с помощью jQuery

3 голосов
/ 30 декабря 2010

Привет всем, у меня проблема с IE, которая кажется довольно известной / распространенной ошибкой.У меня есть слайд-шоу с изображениями, которое я построил в jQuery, которое работает безупречно в других браузерах.Однако в IE я столкнулся с проблемой сглаживания текста после однократного показа слайдов.То есть, если в слайд-шоу есть три изображения, то при первом отображении каждого из этих трех изображений со своим текстом текст отображается правильно.Однако, как только слайд-шоу циклически перебирает текст, он становится сглаженным.

Я прочитал об этом и просмотрел бесчисленные блоги о том, как лучше всего это исправить.Самым распространенным исправлением, с которым я столкнулся, является удаление атрибута фильтра, когда непрозрачность достигает 100%, например: 

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

);

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

Ниже приведен код, который я использую, я был бы очень признателен за любую помощь, которую вы, ребята, можете дать мне, чтобы указать мне правильное направление.Спасибо! 

   if(options.fade === true) {

 $("ul",obj).children().css({
 'width' : $("ul",obj).children().width(),
 'position' : 'absolute',
 'left' : 0

 });

 for(var i = $("ul",obj).children().length -1, y = 0; i >= 0; i--, y++) {
 $("ul",obj).children().eq(y).css('zIndex', i + 99999);

 }


 fade();
} 

 function fade() {

 setInterval(function() {
  $("ul",obj).children(':first').animate({ 'opacity' : 0}, options.speed, function() {      
  $("ul",obj)
    .children(':first')
    .css('opacity', 1)
    .css('zIndex', $("ul",obj).children(':last').css('zIndex') - 1)
    .appendTo("#db-slider-ul");   

     });


 }, options.pause);
 }

});

Ответы [ 3 ]

1 голос
/ 26 апреля 2011

Проще сделать это: 

$("#sample").fadeIn(1000,function(){this.style.removeAttribute("filter");});

или 

$("#sample").fadeOut(1000,function(){this.style.removeAttribute("filter");});

или 

$("#sample").show(1000,function(){this.style.removeAttribute("filter");});

или 

$("#sample").hide(1000,function(){this.style.removeAttribute("filter");});
1 голос
/ 02 января 2011

Добавьте это в новый файл js, скажем jquery.fadefix.js: 

jQuery.fn.fadeIn = function(speed, callback) { 
    return this.animate({opacity: 'show'}, speed, function() { 
        if (jQuery.browser.msie)  
            this.style.removeAttribute('filter');  
        if (jQuery.isFunction(callback)) 
            callback();  
    }); 
}; 

jQuery.fn.fadeOut = function(speed, callback) { 
    return this.animate({opacity: 'hide'}, speed, function() { 
        if (jQuery.browser.msie)  
            this.style.removeAttribute('filter');  
        if (jQuery.isFunction(callback)) 
            callback();  
    }); 
}; 

jQuery.fn.fadeTo = function(speed,to,callback) { 
    return this.animate({opacity: to}, speed, function() { 
        if (to == 1 && jQuery.browser.msie)  
            this.style.removeAttribute('filter');  
        if (jQuery.isFunction(callback)) 
            callback();  
    }); 
};

и включите этот файл после основного скрипта jquery на своей странице. 

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.fadefix.js"></script>

Fade теперь будет работать как положено в IE.

0 голосов
/ 01 апреля 2011

Была такая же проблема. Я ломал голову, пытаясь понять, почему это решение работает для всех остальных, но не для меня.

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

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

Это отлично сработало для меня. Надеюсь, это поможет кому-то еще, кто гуглит это, как я.

...