jQuery背景图片过渡如何？

Question

我正在尝试创建背景变化的主页。现在，我已对其进行了设置，以使主体本身保留背景图像，并且我只希望一个图像淡出到下一个图像，然后循环到起点。

我的第一个问题：它不起作用。期。我的第二个问题：如果确实有效，它可能会立即过渡到下一个，然后延迟间隔时间...我该如何防止呢？

以下是我的代码，该代码位于html文档上标签的底部：

$(window).load(function() {
           var current_scene = 0;
           setInterval(function() {
               if (current_scene == 0) {
                   var current_scene = 1;
                   $(body).animate({
                       backgroundImage: 'url(...)'
                   },400);
               } else if (current_scene == 1) {
                   var current_scene = 2;
                   $(body).animate({
                       backgroundImage: 'url(...)'
                   },400);
               } else {
                   var current_scene = 0;
                   $(body).animate({
                       backgroundImage: 'url(...)'
                   },400);
               }
           }, 3000);
       });

提前致谢！

Answer 1

您无法使用js设置身体的backgorund图像动画，并将身体选择器更改为$（“ body”）

          $(document).ready(function(){
                var current_scene = 0;
                setInterval(function() {
                    startAnimation();
                }, 3000);

                function startAnimation() {
                    if (current_scene == 0) {
                        current_scene = 1;
                        $("body").css({ 'background-image': 'url(1.png)' });
                    } else if (current_scene == 1) {
                        current_scene = 0;
                        $("body").css({ 'background-image': 'url(2.png)' });
                    }
                }
            });

或尝试这个干净的代码

       $(document).ready(function () {
            var img_array = ['1.png', '2.png'];
            var indexOfImage = 0;
            var interval = 3000;
            setTimeout(function () {
                $('body').css('backgroundImage', 'url(' + img_array[indexOfImage++ % img_array.length] + ')');
                setTimeout(arguments.callee, interval);
            }, interval);
        });

给身体增添一些风格

body {
    background-image: none;
    width: 100%;
    height: 100%;
    -webkit-transition: background 0.6s ease-in-out;
    -moz-transition: background 0.6s ease-in-out;
    -o-transition: background 0.6s ease-in-out;
    transition: background 0.6s ease-in-out;
    background-size: cover;
    background-repeat: repeat;
    background-position: 0 0;
}