2

これはよく知られた領域であることは認識していますが、SO やその他の場所で推奨される解決策を得ることができません。

クリックすると 25% にフェードアウトし、その後のクリックで 100% にフェードインするテキストを含む div があります。IE を除くすべてのブラウザーでうまく動作します (IE8 でテストしています)。問題: div をフェードインした後、IE のテキストはすべてぎざぎざで不完全です (正しい用語は「アンチエイリアスされていない」可能性があると思います)。

私が見つけることができるすべての推奨される解決策を試しました。最も頻繁に推奨されるのは、以下の例に含まれているもので、(fadeTo を使用する代わりに) 不透明度をアニメートし、IE に filter:alpha(opacity) を適用し、一度コールバックでフィルターを削除します。 100% のアニメーションが完了しました。私も試しました（他の提案による）：

  • css background-color および no background-color (div 用)
  • フィルターを削除するさまざまな方法 (以下のコードのコメントを参照)
  • div に高さ、幅、float:left があることを確認する

これが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")
            });
        });
    });

CSSは次のとおりです。

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

ご指導ありがとうございました！

4

1 に答える 1

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]-->
于 2012-02-02T18:11:28.020 に答える