Internet ExplorerでのjQuery不透明度アニメーションの歪みの配置

Question

opacityプロパティとjQueryアニメーション関数を使用して、水平タブメニューにクリックのような効果を実装しようとしています。これを行うためのコードは次のとおりです。

$(document).ready(function() {      
    $("div#header > ul > li").click(function(event) {
        $(this).animate({opacity: 0.7} ,"fast", "", function() {
            $(this).animate({opacity: 1} ,"fast");
        });
    });
});

Internet Explorer 7および6で問題が発生します。不透明度プロパティを使用してアニメートすると、水平メニューのタブの初期位置が失われます。

ここをクリックしてウェブサイトにアクセスします。問題を確認するには、「Contato」をクリックします。そして「In＆＃237; cio」で再びクリックします。 （申し訳ありませんが、ポルトガル語で書かれていますが、バグが発生するのを確認できるはずです）。注意、今までこの問題はIE7 / IE6でのみ検出されていました！

事前に感謝します！

Answer 1

IEは不透明度をサポートしていないため、これは単に不透明度とInternet Explorerに関連するバグだと思います。 jQuery.support.opacity 属性の jQueryドキュメントから：

  

opacity：ブラウザが   不透明度を適切に解釈できます   スタイルプロパティ（現在はfalse   IE、代わりにアルファフィルターを使用します）。

バグを回避し、互換性のあるブラウザーに影響を与えるために、アニメーションコードを次の条件でラップしました。

if ($.support.opacity) {
//animation code
}