0

jQuery と CSS でフェード バックグラウンドを実行しようとしていますが、これは私のコードですが、機能していません。何か案は？

var images = ['bg.jpg', '_4.jpg', '_5.jpg', '_6.jpg'];
var i = 0;

setInterval(function(){
$('body').animate({opacity: 0}, 'slow', function() {
        $(this)
            .css('background-image', function() {
        if (i >= images.length) {
            i=0;
        }
        return 'url(' + images[i++] + ')'; 
    });
            .animate({opacity: 1});
    });
}, 1000);
});
4

2 に答える 2

0 
setInterval(function(){
            $('.light').animate({opacity: 0}, 4000, function() {
                $('.light').css({background:'url(./images/' + images[i++] + ') no-repeat top center'}).animate({opacity: 1},4000);
                if (i >= images.length) { i=0; }
            });
        }, 4000);

これは動作する必要があります。divでこれを試してください

于 2013-12-10T00:13:17.537 に答える
0

背景色をアニメーション化できますが、背景画像はアニメーション化できません。私もこの壁に頭をぶつけました。

ここを参照してください-スクロール時に新しい背景画像をフェードインする

私の質問への回答のよう<img>に、負の z-index で を使用し、それらをフェードインする必要があります。

これが私がやった方法です-

CSS

#img1, #img2, #img3, #img4 {
    width:100%;
    height:100%;
    display:none;
    position:fixed;
    z-index:-1;
}

jQuery

    $(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 150) {
        $('#img2').fadeIn();
    }
    else {$('#img2').fadeOut('fast')};

    if (y > 300) {
        $('#img3').fadeIn();
    }
    else {$('#img3').fadeOut('fast')};

    if (y > 450) {
        $('#img4').fadeIn();
    }
    else {$('#img4').fadeOut('fast')};
});
于 2013-05-06T23:37:49.670 に答える