0

背景画像を持つ div 要素があり、Jquery で背景画像をフェードインおよびフェードアウトしようとしています。今では機能はうまく機能しますが、背景だけでなく、div全体がフェードアウトします。

function rentPics()
{
    $('#d2').css('background-image','url(' + mazdaArr[1] + ')');
    interID=setInterval (changeImage,3000);
}

function changeImage()
    {
        $('#d2').animate({opacity: 0}, 1500, function(){
        $('#d2').css('background-image', 'url(' + mazdaArr[x] + ')');
        }).animate({opacity: 1}, 1500);
        x++;
        if (x==mazdaArr.length)
        {
            x=1;
        }
    }
4

4 に答える 4

2

シンプルで軽量なクロスフェードを探している場合は、CSS を使用してtransitionください。これはtext、要素内のborderおよび には影響しませんbox-shadow。

transition: background-image 1s ease-in-out;
-webkit-transition: background-image 1s ease-in-out;
-moz-transition: background-image 1s ease-in-out;
-ms-transition: background-image 1s ease-in-out;
-o-transition: background-image 1s ease-in-out;

このフィドルをチェックしてください。

Chrome、Safari、Opera でサポートされていますが、Firefox と IE についてはよくわかりません。

ループする画像のリストが大きい場合。最初の使用時にちらつき/点滅に気付いたので、最初に画像の URL をキャッシュすることを検討することもできます。ここで解決策を確認してください - CSS 背景画像のプリロード

于 2013-11-13T02:48:45.167 に答える
0

jQuery を使用して不透明度をアニメーション化する代わりに、クラスを追加または削除することができます。次に、CSS にトランジションを追加します。これにより、目的の結果が得られます。以下のようなものがうまくいくかもしれません。CSS トランジションのドキュメントはこちらでご覧いただけます。唯一の欠点は、通常どおり IE です。

.element {
  -webkit-transition: ease 0.2 all;
  -moz-transition: ease 0.2 all;
  -o-transition: ease 0.2 all;
  -ms-transition: ease 0.2 all;
  transition: ease 0.2 all;
}
于 2013-11-12T22:09:41.543 に答える