0

メニュー（img.bとimg.a）の重ね合わせ用にこの2つの画像クラスがあり、img.bはデフォルトで上にあり、透明度は0です。img.aをフェードアウトさせ、もう一方をフェードインさせる必要があります..のように私が持っているコード、img.aはフェードインするものの下に残ります（2つのクラスには透明性があるため、それらを重ねて見ることができます）..いくつかの解決策を試しましたが、すべてのボタンに一緒に影響を与えてしまいました。

<script type='text/javascript'>
$(document).ready(function(){
$("img.b").hover(
function() {
$(this).stop().animate({"opacity": "1"}, "fast");
},
function() {
$(this).stop().animate({"opacity": "0"}, "fast");
});
});
</script>


img.a {
    z-index: 1;
    position:absolute;
        }

img.b {
    position:absolute;
    opacity: 0;
    z-index:10;
    }
4

1 に答える 1

0

これは、この前の質問に似ています。あなたがやろうとしていることは、クロスフェードと呼ばれます。 この記事はそれを非常によく説明しています。

CSS を使用したクロスフェードにも興味があるかもしれません。

本当の問題は、JavaScript はシングル スレッドであるため、真のクロス フェードを実際に行うのが難しいことです。すべての「クロス フェード」プラグインなどは、最上位の要素のみをフェードアウトさせるか、バックグラウンドを高速で点滅させることによって偽造します。つまり、0.5 ミリ秒の間背景を示す 500 ミリ秒で 1 つの画像をフェードアウトし、その後すぐに 500 ミリ秒かけて新しい画像をフェードインします。

透過性のある 2 つの画像がある場合、クロス フェードを適切に行うには、背景を介したフェイク クロス フェード テクニックを使用する必要があります。

一部のキャンバスと requestAnimationFrameを使用して真のクロス フェードを取得することは可能かもしれませんが、単純な jQuery の fadeIn/fadeOut 呼び出しよりもはるかに複雑になっています。

于 2013-03-19T23:04:49.807 に答える