2012-02-02 93 views
2

我意識到這是一個受到良好踐踏的領土,但我無法獲得SO或其他地方的任何推薦解決方案。IE扭曲JQuery淡入淡出/不透明動畫文本

我有一個div,裏面有文本,我想淡出到25%的點擊,然後在隨後的點擊中淡入到100%。它適用於除IE以外的所有瀏覽器(我在IE8中測試)。問題是:在將div淡入之後,IE中的文本全是鋸齒狀和不完整的(我認爲正確的術語可能是「不反鋸齒」)。

我試過了所有我能找到的建議解決方案。最常見的建議似乎是我在下面的示例中包含的一個,它是爲不透明度設置動畫效果(而不是使用fadeTo),爲IE應用濾鏡:alpha(不透明度),然後在回調中刪除過濾器動畫到100%已完成。我也試過(每其他建議):

  • CSS背景色和無背景顏色(股利)
  • 去除過濾器的各種方式(請參閱下面的代碼中的註釋)
  • 確保我的div有一個高度,寬度和浮動:左

這裏的JavaScript:

$(document).ready(function(){ 
    $("#fade_button").click(function(){ 
     $('#test_div').animate(
      {opacity:0.25}, 
      500, 
      function() { 
       $("#test_div").css('filter','alpha(opacity=25)'); 
      }); 
     }); 
    $("#unfade_button").click(function(){ 
     $('#test_div').animate(
      {opacity:1.0}, 
      500, 
      function() { 
       $("#test_div").css('filter','none'); // tried ('filter','') and document.getElementById("#test_div").style.removeAttribute("filter") 
      }); 
     }); 
    }); 

這裏的日e css:

 div#test_div 
     { 
     float:left; 
     width:1000px; 
     height:200px; 
     margin-left:50px; 
     border:1px solid black; 
     background-color:yellow; 
     } 

非常感謝您的指導!

+0

「not anti-aliased」= aliased。 – j08691 2012-02-02 17:27:04

回答

1

問題是IE添加一個過濾器屬性。我使用這個插件來刪除它。

(function($) { 
    $.fn.fadeIn = function(speed, callback) { 
    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) { 
    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) { 
    return this.animate({opacity: to}, speed, function() { 
      if (to == 1 && $.browser.msie) 
      { 
        this.style.removeAttribute('filter'); 
      } 
      if ($.isFunction(callback)) 
      { 
        callback.call(this); 
      } 
    }); 
    }; 
})(jQuery); 

然後有條件地添加它。

<!--[if IE]><script type="text/javascript" src="jquery-ie-fade-fix.js"></script><![endif]--> 
+0

非常感謝詹姆斯。我最終在if($。browser.msie)條件中使用this.style.removeAttribute('filter')在頁面上的js中(在回調中),並且它工作正常! – 2012-02-03 04:45:23