JQuery 페이딩/불투명도 애니메이션에서 IE 왜곡 텍스트

Question

이것이 잘된 영역이라는 것을 알았지 만, SO 또는 다른 곳에서 권장 솔루션을 얻을 수는 없습니다.

나는 텍스트가있는 div가 있는데, 클릭하면 25 %로 희미 해지고 다음 클릭에서는 100 %로 희미 해지기를 원합니다. IE (IE8에서 테스트 중)를 제외한 모든 브라우저에서 훌륭하게 작동합니다. 문제 : div를 다시 페이드 한 후에 IE의 텍스트가 들쭉날쭉하고 불완전합니다 (올바른 용어는 "앤티 앨리어싱이 적용되지 않았 음"이라고 생각합니다).

나는 모든 권장 해결책을 찾았습니다. 가장 자주 권장되는 것은 다음 예제에 포함 된 것인데, 불투명도를 fadeTo 대신 사용하여 애니메이션에 적용하고 IE에 알파 (불투명도) 필터를 적용한 다음 콜백에서 필터를 제거한 것입니다. 100 % 애니메이션이 완료되었습니다. 나는 또한 (다른 제안 당) 시도했다 :

• CSS의 배경 색상과 (사업부에 대한) 어떤 배경 컬러 필터를 제거
• 다양한 방법 (아래 코드에 주석을 참조)
• 확실히 내 사업부는 폭과 플로트 높이했습니다 제작 :
  이

  $(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; 
     } 

모든 안내에 감사드립니다.

Answer 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]-->