jQuery背景图像过渡如何？答案

【问题标题】：jQuery Background Image Transition How To?jQuery背景图像过渡如何？
【发布时间】：2015-05-04 16:27:18
【问题描述】：

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

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

以下是我的代码，位于 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);
       });

提前致谢！

【问题讨论】：

标签： jquery image background background-image fade

【解决方案1】：

你不能用js为body的backgorund-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;
}

【讨论】：

【解决方案2】：

这是工作代码

为选择器 $("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);

       });

【讨论】：