PSJay Blog

#FIXME, seriously

jQuery fadeIn/fadeOut IE Cleartype 的毛病

| Comments

本文翻译自:http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/


今天上班在 IE 7 下用 jQuery 时发现了一个毛病。当用 jQuery 的 .fadeIn() 和 .fadeOut() 方法改变一个 html 节点的不透明度时,IE 不会用 Cleartype 去渲染,这使得文字变得非常难看。这个问题出现得很频繁,但是还没有一个人给出一个比较好的解决方案。

最通常的解决办法就是移除 filter 这个 CSS 属性。用普通的 javascript 代码就这样写:

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

用 jQuery 就这样写:

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

这意味着每次我们要改变一个元素的透明度时就要移除它的 filter 属性, 这让我们的代码看起来很二。

一个简单并且更加优雅的方法就是通过 jQuery 的插件接口写一个自定义的函数来封装 .fadeIn() 和 .fadeOut()。代码实际上是一样的,只是我们要调用这个封装器函数,而不是直接调用 .fadeIn() 和 .fadeOut()。就像这样:

1
2
3
$('#node').customFadeOut('slow', function() {
   // 这里就不要再折腾什么 CSS 属性了
});

那到底要怎么弄才能使上面的代码生效呢?只需要在包括 jQuery 库之后包括下面这段代码就行了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
(function($) {
  $.fn.customFadeIn = function(speed, callback) {
      $(this).fadeIn(speed, function() {
          if(jQuery.browser.msie)
              $(this).get(0).style.removeAttribute('filter');
          if(callback != undefined)
              callback();
      });
  };
  $.fn.customFadeOut = function(speed, callback) {
      $(this).fadeOut(speed, function() {
          if(jQuery.browser.msie)
              $(this).get(0).style.removeAttribute('filter');
          if(callback != undefined)
              callback();
      });
  };
})(jQuery);

Comments