jQuery fadeIn deja texto no suavizado en IE7

Question

¿Por qué sucede esto? ¿Alguna solución?

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

Hay un problema conocido con las funciones fadeIn/IE y Fadeout y su efecto sobre los elementos de texto. Echa un vistazo a la información aquí:

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

Parece que mi enlace original ha ido ya muerto. Actualizado con una solución diferente de los comentarios:

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

La solución consiste en eliminar la propiedad 'filtro' del elemento en una función de devolución de llamada después de fadeIn() ha terminado.

Answer 2

Por lo que recuerdo, el atributo de filtro que se está configurando causa esto. Después de completar su fadeIn, elimine el atributo de filtro del elemento.

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

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

Answer 3

Parece que la respuesta aceptada tiene un enlace muerto. Creo que la misma información está ahora disponible en http://blog.wolffmyren.com/2009/05/28/jquery-fadeinfadeout-ie-cleartype-glitch/.

para preservar la información en stackoverflow, he aquí el contenido de ese enlace:

Gracias a Benjamin Michael Novakovic para esta revisión!

jQuery fadeIn/fadeOut IE cleartype fallo

Durante el uso de la biblioteca jQuery JavaScript hoy en el trabajo, me di cuenta de un fallo bajo IE7. Al desvanecer un nodo html con las funciones .fadeIn() y .fadeOut() en jQuery, IE descarta la representación de Cleartype de ventanas ; que da como resultado un texto muy desagradable. Este problema parece ser muy común, pero nadie tiene una buena solución para el problema .

La forma más común de resolver este problema es eliminar el atributo de filtro CSS . En Javascript normal, se vería así:

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

y en jQuery, que se vería así:

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

a través de Benjamin Michael Novakovic » jQuery fadeIn/fadeOut IE cleartype fallo.

Answer 4

Encontré una solución mejor y más general, en http://jquery.malsup.com/fadetest.html.

Lo he tomado y lo he adaptado a un archivo JavaScript independiente para incluirlo en las páginas que usan los métodos 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); 

EDIT: solución Incorporated joeformd 's para las devoluciones de llamada.

Edit2: solución Añadido para el caso del rincón donde no se define la velocidad, sino de devolución de llamada es -Tomi

Answer 5

basta con aplicar el color de fondo para el elemento exacto que la decoloración .. por lo que yo recuerdo no funcionará en el de los niños si aplicas a los padres, entonces tiene que estar en este mismo elemento que recibe un alias.

Answer 6

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

Agregue esto en la parte superior de sus documentos html. Funciona en IE 8.07xxxx. No estoy seguro de que esta técnica funcione en IE 7.

Answer 7

Agregue esto en su JS. Soluciona el error y mantiene el alcance correcto. Cuando se añade a jQuery, todavía pasa todas las pruebas unitarias:

(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); 

escrito por mí :)

Answer 8

Ninguna de estas soluciones trabajó para mí desvaneciendo en un div usando animado de jQuery, ya que el filtro estaba en el estilo elemento. Por lo tanto es lo que tenía que hacer:

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

Obviamente esto eliminará cualquier otro estilos en línea que pueda tener también.

Answer 9

Ninguna de estas soluciones funcionó para mí o no fueron adecuadas, por ejemplo, no quiero cambiar mi declaración de DTD HTML5 solo por un error de IE, y no puedo cambiar el color de fondo ya que se usa en otra animación

También estoy usando jQuery .animate así que esto puede ser un poco fuera de tema pero la solución que funcionó perfectamente fue this one. Es un buen artículo, pero el código del núcleo es:

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

Answer 10

Así es como me deshice de mi fea desvanecido en el texto en IE 8: uso fadeTo lugar y el engranaje que hasta el 99%!

Por lo tanto esto funcionó para mí:

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