style - jquery modify title tag

jQuery fadeIn deja texto no anti-alias en IE7

Question

¿Por qué pasó 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

Agregue esto en su JS. Soluciona el error y mantiene el alcance correcto. Cuando se agrega 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 mi :)

Answer 2

Así es como me deshice de mi desagradable desvanecimiento en el texto de IE 8: ¡usa fadeTo en fadeTo lugar y fadeTo hasta en un 99%!

Por lo tanto, esto funcionó para mí:

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

Answer 3

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

Lo tomé y lo adapté en un archivo JavaScript independiente para ser incluido en 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);

EDITAR: Incorpora la joeformd de joeformd para las devoluciones de llamada.

EDIT2: Arreglo agregado para el caso de esquina donde la velocidad no está definida pero la devolución de llamada es -Tomi

Answer 4

Existe un error conocido con IE y las funciones fadeIn / fadeOut y su efecto sobre los elementos de texto. Mira la información aquí:

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

Parece que mi enlace original ha 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 que fadeIn () haya finalizado.

Answer 5

Ninguna de estas soluciones funcionó para mí desvaneciéndome en un div usando el animado de jQuery, ya que el filtro estaba en el elemento de estilo. Por lo tanto, es lo que necesitaba hacer:

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

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

Answer 6

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 mi color de fondo ya que se usa en otra animación.

También estoy usando jQuery .animate así que esto puede estar un poco fuera de tema, pero la solución que funcionó perfectamente fue esta . Es un buen artículo, pero el código central es:

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

Answer 7

Parece que la respuesta aceptada ahora 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 conservar la información en , aquí están los contenidos de ese enlace:

¡Gracias a Benjamin Michael Novakovic por esta solución!

jQuery fadeIn / fadeOut IE cleartype glitch

Mientras usaba la biblioteca jQuery javascript hoy en el trabajo, noté un problema bajo IE7. Cuando se desvanece un nodo html con las funciones .fadeIn () y .fadeOut () en jQuery, IE descarta la representación de Windows Cleartype; que da como resultado un texto muy feo 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 CSS del filtro. En javascript normal, se vería así:

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

y en jQuery, se vería así:

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

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

Answer 8

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 9

Simplemente aplique el color de fondo al elemento exacto que está desvaneciéndose. Por lo que recuerdo, no funcionará en los juegos para niños si aplica al padre, por lo que tiene que estar en este mismo elemento que recibe un alias.

Answer 10

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

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