Question

我正在尝试将身体背景图像换出并循环播放。我写的当前代码实现了效果，但是因为它的编写方式逐渐消失，文档中的所有内容也都消失了。我不能放弃我的头脑如何更改它所以我可以让内容不淡出，只是留下但仍然有背景图像循环。有谁能帮忙？谢谢！这是代码：

var currentBackground = 0;
var backgrounds = [];
backgrounds[0] = 'images/clubhouseview.jpg';
backgrounds[1] = 'images/holefour.jpg';

function changeBackground() {
    currentBackground++;
    if(currentBackground > 1) currentBackground = 0;

    $('body').fadeOut(100,function() {
        $('body').css({
            'background-image' : "url('" + backgrounds[currentBackground] + "')"
        });
        $('body').fadeIn(100);
    });


    setTimeout(changeBackground, 2000);
}

$(document).ready(function() {
    setTimeout(changeBackground, 2000);        
});

Answer 1

您的问题是，您是将.fadeOut()应用于body元素。为此，您需要将效果应用于正在更改的元素。

我会使用JS来更改图像网址，然后使用css来进行转换。 E.g

body {
-webkit-transition: background-image 0.5s ease-in-out;
-moz-transition: background-image 0.5s ease-in-out;
-ms-transition: background-image 0.5s ease-in-out;
-o-transition: background-image 0.5s ease-in-out;
transition: background-image 0.5s ease-in-out;
}

Demo here

这将仅向背景图像添加一个过渡，因此只会对其进行动画处理，而不是其他正文内容。

身体背景图像循环

1 个答案: