jQuery fadeIn lascia il testo non anti-alias in IE7

Question

Perché ciò accade? Qualche soluzione alternativa?

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

C'è un bug noto con IE e le funzioni fadeIn/dissolvenza e il loro effetto su elementi di testo. Scopri le info qui:

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

Sembra che il mio link originale da allora ha continuato morto. Aggiornato con una soluzione diversa da osservazioni:

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

La soluzione è rimuovere la proprietà 'filtro' dell'elemento in una funzione di callback dopo fadeIn() è terminato.

Answer 2

Da quello che ricordo, l'attributo di filtro impostato lo fa. Una volta completato il tuo fadeIn, rimuovi l'attributo filter dall'elemento.

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

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

Answer 3

Sembra che la risposta accettata ora abbia un collegamento morto. Penso che le stesse informazioni siano ora disponibili allo http://blog.wolffmyren.com/2009/05/28/jquery-fadeinfadeout-ie-cleartype-glitch/.

per mantenere le informazioni in StackOverflow, qui ci sono i contenuti di quel link:

grazie a Benjamin Michael Novakovic per questa correzione!

jQuery fadeIn/fadeOut IE ClearType problema tecnico

Mentre si utilizza la libreria javascript jQuery oggi al lavoro, ho notato un problema tecnico sotto IE7. Quando si sbiadisce un nodo html con le funzioni .fadeIn() e .fadeOut() in jQuery, IE elimina il rendering di Cleartype di windows ; che produce un testo molto brutto. Questo problema sembra essere molto comune, ma nessuno ha una buona soluzione per il problema .

Il modo più comune per risolvere questo problema è rimuovere l'attributo CSS del filtro. In javascript normale, sarebbe simile a questa:

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

e in jQuery, sarebbe simile a questa:

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

via Benjamin Michael Novakovic » jQuery fadeIn/fadeOut IE ClearType problema tecnico.

Answer 4

Ho trovato una soluzione migliore, più generale, a http://jquery.malsup.com/fadetest.html.

L'ho preso e adattato in un file JavaScript autonomo da includere nelle pagine che usano i metodi 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: correzione Incorporated joeformd s' per i callback.

EDIT2: correzione aggiunto per caso angolo dove la velocità non è definito, ma è richiamata -Tomi

Answer 5

è sufficiente applicare il colore di sfondo per elemento esatto dissolvenza .. per quanto mi ricordo che non funzionerà sui bambini di se si applica al genitore, quindi deve essere su questo stesso elemento che ottiene alias.

Answer 6

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

Aggiungere questo sopra i documenti html. Funziona su IE 8.07xxxx. Non sono sicuro che questa tecnica funzioni su IE 7.

Answer 7

Aggiungi questo nel tuo JS. Corregge il bug e mantiene l'ambito corretto. Una volta aggiunto al jQuery, passa ancora tutti i test di unità:

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

Scritto da me :)

Answer 8

Nessuna di queste soluzioni ha lavorato per me dissolvenza in un div utilizzando animato di jQuery, come il filtro era in stile elemento. Pertanto è quello che dovevo fare:

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

Ovviamente questo rimuoverà qualsiasi altro stile in linea che possiate avere.

Answer 9

Nessuna di queste soluzioni ha funzionato per me o altrimenti non erano adatte, ad esempio non voglio cambiare la mia dichiarazione DTD HTML5 solo per un bug di IE, e non posso cambiare il colore di sfondo come se fosse usato in un'altra animazione.

Sto anche utilizzando jQuery .animate quindi questo potrebbe essere un po 'fuori tema ma la soluzione che ha funzionato perfettamente era this one. La sua un buon articolo, ma il codice di base è:

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

Answer 10

Questo è come mi sono liberato della mia brutta sbiadita nel testo su IE 8: uso fadeTo invece e gli attrezzi che fino al 99%!

Quindi questo ha lavorato per me:

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