JQuery bascule la fonction rendant le texte étrange dans IE (perte de ClearType?)

C’est peut-être ce que vous cherchez. En outre, il existe une démonstration fonctionnelle d’une autre méthode similaire disponible en ligne .:

 //------------------------------------------------------------------------------------------------------- // ClearTypeFadeTo / ClearTypeFadeIn / ClearTypeFadeOut // // Custom fade in and fade out functions for jQuery that will work around // IE's bug with bold text in elements that have opacity filters set when // also using Window's ClearType text rendering. // // New Parameter: // bgColor The color to set the background if none specified in the CSS (default is '#fff') // // Examples: // $('div').ClearTypeFadeIn({ speed: 1500 }); // $('div').ClearTypeFadeIn({ speed: 1500, bgColor: '#ff6666', callback: myCallback }); // $('div').ClearTypeFadeOut({ speed: 1500, callback: function() { alert('Fade Out complete') } }); // // Notes on the interaction of ClearType with DXTransforms in IE7 // http://blogs.msdn.com/ie/archive/2006/08/31/730887.aspx (function($) { $.fn.ClearTypeFadeTo = function(options) { if (options) $(this) .show() .each(function() { if (jQuery.browser.msie) { // Save the original background color $(this).attr('oBgColor', $(this).css('background-color')); // Set the bgColor so that bold text renders correctly (bug with IE/ClearType/bold text) $(this).css({ 'background-color': (options.bgColor ? options.bgColor : '#fff') }) } }) .fadeTo(options.speed, options.opacity, function() { if (jQuery.browser.msie) { // ClearType can only be turned back on if this is a full fade in or // fade out. Partial opacity will still have the problem because the // filter style must remain. So, in the latter case, we will leave the // background color and 'filter' style in place. if (options.opacity == 0 || options.opacity == 1) { // Reset the background color if we saved it previously $(this).css({ 'background-color': $(this).attr('oBgColor') }).removeAttr('oBgColor'); // Remove the 'filter' style to restore ClearType functionality. $(this).get(0).style.removeAtsortingbute('filter'); } } if (options.callback != undefined) options.callback(); }); }; $.fn.ClearTypeFadeIn = function(options) { if (options) $(this) .css({ opacity: 0 }) .ClearTypeFadeTo({ speed: options.speed, opacity: 1, callback: options.callback }); }; $.fn.ClearTypeFadeOut = function(options) { if (options) $(this) .css({ opacity: 1 }) .ClearTypeFadeTo({ speed: options.speed, opacity: 0, callback: options.callback }); }; })(jQuery); 

Pour Paul, append à la solution des réponses acceptées, la création d’une fonction de basculement est simple.

 $.fn.ClearTypeToggle = function(options) { if ($(this).css('opacity') == 1) { $(this).ClearTypeFadeOut(options); } else { $(this).ClearTypeFadeIn(options); } }