jQuery 背景图像过渡如何？

Question

我正在尝试创建一个背景不断变化的主页。现在，我已将其设置为 body 本身包含背景图像，我只希望一张图像淡出到下一张，然后循环到开头。

我的第一个问题：它不工作。时期。我的第二个问题：如果它确实有效，它可能会在延迟间隔之前立即过渡到下一个...我该如何防止这种情况？

以下是我的代码，可在 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

这是工作代码

为选择器 $("body")

全局声明变量和固定引号

var current_scene = 0;
    $(window).load(function() {

           setInterval(function() {
               if (current_scene == 0) {

                   current_scene = 1;

                   $("body").animate({

                       backgroundImage: 'url("someimagename.png")'

                   },400);

               } else if (current_scene == 1) {

                   current_scene = 2;

                   $("body").animate({

                       backgroundImage: 'url("someimagename2.png")'

                   },400);

               } else {

                   current_scene = 0;

                   $("body").animate({

                       backgroundImage: 'url("someimagename3.png")'

                   },400);

               }
           }, 3000);

       });

Answer 2

你不能用 js 给 body background-image 做动画，把 body selector 改成 $("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;
}

jQuery 背景图像过渡如何？

jQuery Background Image Transition How To?

jquery

background

image

fade

background-image