web-dev-qa-db-ja.com

アニメーションの不透明度は、IE

animate()を使用してdivの高さと不透明度を変更しようとしています。 divにはCSSの画像背景があります。 FirefoxとSafariで正常に動作しますが、IEでテストすると、背景が削除されます。これは私のコードです。

if (jQuery.support.opacity) {
    jQuery('#list_box').animate({opacity: '1',height: '300px',top: newTop},{duration: 300});
} else {
    jQuery('#list_box').animate({filter: 'alpha(opacity=100)',height: '300px',top: newTop},{duration: 300});
}

この問題を修正するにはどうすればよいですか？

javascriptjqueryinternet-exploreranimation
31
fidoboy

私はjQueryが完全に不透明度をサポートしているという印象を受けました。これはすべてのブラウザで機能しますか？

$('#list_box').animate({opacity: '1',height: '300px',top: newTop},{duration: 300});
17
Eric

IE用の特別なハンドラーを作成する必要はありません。jQueryはすべてを舞台裏で行います。

jQuery('#list_box').animate({opacity: '1',height: '300px',top: newTop}, 300);

[〜＃〜] however [〜＃〜]：消える背景画像として24ビットの透過PNGがある場合、filter: alphaを結合できないことに注意する必要があります。 （IEの舞台裏でjQueryが正しく使用します）IE7またはIE8の24ビット透過PNG。それを回避する唯一の方法は、filter: alphaを使用しているオブジェクトに背景色（transparent以外）を設定することだと思います

テスト方法：#list_boxの背景色を、CSSに次のようなものを追加して、単色に設定しますafterbackground-image宣言：

#list_box { background-color: red }

背景画像が残っていて、#list_boxが正しくアニメーション化されている場合（恐ろしい背景を除く）、問題が何であるかがわかっているので、目的を達成する別の方法を見つける必要があります。

16
Doug Neiner

答えは非常に（非常に）遅くなりましたが、IE8でjquery v animateの問題に関するヘルプを探したとき、これはGoogleのトップにあるので、ここに投稿すると思いました。

私の問題はIEのhasLayoutバグに関連しており、フェードする要素に「display：inline-block」を追加すると問題が修正されました。

5
katebp

私は同じ問題を抱えています。不透明度を40％に設定すると、私は答えを見つけました。

$('#list_box').stop().animate({opacity: '.4'},"slow");

不透明度が100％にジャンプしてから、40％にアニメートされることに気付きました。ユーレカ。

したがって、アニメーションの前に不透明度を明示的にゼロに設定します。

$('#list_box').css({opacity:0}).stop().animate({opacity: '1'},"slow");

IEでテキストがまだ恐ろしいように見えることを除いて、それはスムーズにアニメーション化します。

テキストをクリーンアップするために、アニメーションの後にIE=でcssから不透明度を削除しました。これはIE6とIE8でテキストをかなりクリアするようです。

$('#list_box').css({opacity:0}).stop().animate({opacity: '1'},"slow",function(){
    //remove the opacity in IE
    jQuery.each(jQuery.browser, function(i) {
        if($.browser.msie){
            $('#list_box').css({opacity:''});
        }
    });
});

ParallelsのMac、IE6およびIE8でテストしています。 Mac側ではすべてがうまくいくようです。

5
user242190

私はこれで同じ種類の問題がありました：

$('#nav li').hover(function() {
 $(this).stop().animate({opacity: '0.4'}, 'slow');
},
function() {
 $(this).stop().animate({opacity: '1'}, 'slow');
});

Float：leftを追加しただけです。 #nav li cssに追加し、問題を修正しました。

4
Hoxxy

JQueryでは、divがopacity：0（Standards Compliant Browsersの場合）またはfilter：alpha（opacity = 0）のいずれかをIEに設定すると、使用することができます

$（ '＃div'）。animate（{opacity：1}、100）;

これがお役に立てば幸いです。同じ問題に加えて、IEに複数のアイテムが含まれるdivスタックでフェードを処理できないという奇妙な問題がありました。

3
newfront

この問題は、コンテナの相対的な位置が原因​​であることに気付きました。絶対不透明度アニメーションへの「切り替え」が機能する場合。

3
gleenk

私に合った解決策を見つけました：position:inline-block;これはテキストの不透明度をフェードするために機能しますが、CSSの背景画像では試していません。とにかく役立つでしょう。

Internet Explorer 8のfadeToメソッドに関する小さなバグを報告したかっただけです。「表示」としての要素が「インライン」に設定されている場合は機能しません。あなたはそれを「インラインブロック」に入れる必要があることがわかりました、そしてそれは完全に動作します。ウェブ上でこれについては何もありませんし、この問題は初めてではありません。

この問題を報告するのが正しい方法かどうかはわかりませんが、誰かがこの投稿を読むと確信しています:)

http://www.devcomments.com/IE-8-fadeTo-problem-with-inline-elements-to65024.htm にあります

2
xon1c

IE 7で同じ問題が発生しました。問題は、opacityプロパティの後のコンマです。

jQuery(this).animate({opacity:1.00,},800);

次のようにする必要があります。

jQuery(this).animate({opacity:1.00},800);
2
jenses

アニメーション要素に不透明な背景を追加して解決しました：

CSS：

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 195px;
    height: 274px;
    cursor: pointer;
    background: #fff url('../images/common/image_hover.png') 0 0 no-repeat; /* the solution */
    opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */
    filter: alpha(opacity=0); /* IE6-7 */     
    zoom: 1;
}

JS：

$('.overlay').hover(
    function(){
        $(this).animate({'opacity': 0.7}, 300);
    },
    function(){
        $(this).animate({'opacity': 0}, 250);
    }
);

IE7-8に対応

これが誰かを助けることを願っています;）

2
Kate

fadeToを使用して、やりたいことを実行できます。

$('#list_box').fadeTo("slow", 0.33);

fadeInとfadeOutは0から100％への遷移を行いますが、上記の方法で任意の不透明度にフェードすることができます。

（ http://docs.jquery.com/Effects/fadeTo#speedopacitycallback ）

1
Andy Mikula

[OK]これは少し役立つかもしれません、私はこのサイトで正確な問題についての解決策を見つけました http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/

結論として、一般的な問題はIEの不透明度フィルターです。特定の場合、できることはあまりありません。

ただし、フェードインおよびフェードアウトする場合、png背景画像の問題を防ぐには、fxが終了したときにjQuery関数が追加したフィルター属性を削除するだけです。コールバック関数を使用するだけで、そのようなことができます：

$('#node').fadeOut('slow', function() {<br/>
    this.style.removeAttribute('filter');<br/>
});

セレクターが複数を返す場合、次のような各関数を使用します。

$('.nodes').fadeIn('fast',
    function() {
        $(this).each (
            function(idx,el) {
                el.style.removeAttribute('filter');
             }
        );
     }
);
1
y0ux

IE8と同じ問題。 「display：inline-block」を。hover2に追加すると、問題が修正されました。

$(function() {

        $(".hover1").css("opacity","1.0"); // Default set opacity to 1.0

        // On Mouse over
        $(".hover1").hover( 
                            function () {

                                        // SET OPACITY TO 15%
                                        $("span.hover2").stop().animate({opacity: 0.15}, 1200);
                                        },

                                        // ON MOUSE OUT
                            function () {

                                        // SET OPACITY BACK TO 100%
                                        $("span.hover2").stop().animate({opacity: 1.0}, 1200);
                                        }
                         );
                }
     );
1
Sidd

Pngfixスクリプトを使用しますか？それが犯人かもしれません。

0
Olivvv