如何使用JavaScript淡出/背景图像？

Question

我正在尝试使用以下代码来淡出/在body的background-image属性中：

var main = function() {

var currentPath = 0;
var MudaCenario = function(){
    var paths = ["url('res/teatro1.jpg')", "url('res/teatro2.jpg')", "url('res/teatro3.jpg')" ];


    currentPath++;
    if( currentPath > paths.length ) currentPath = 0;

    $('body').fadeIn(400).css('background-image', paths[currentPath]);
    };

setInterval(MudaCenario, 2000);


};

$(document).ready(main);

在我的css我得到：

body {
left: 0;
margin: 0;
overflow: hidden;
position: relative;
background-image: url('../res/teatro1.jpg');
-webkit-background-size: cover;
 -moz-background-size: cover;
   -o-background-size: cover;
      background-size: cover;
}

图像确实已更改，但没有褪色效果。 我也尝试过：

$('body').animate({ background-image : paths[currentPath] }, 400);

但这没用。

Answer 1

您正在使用fadeIn body 。 实际上，这意味着您正在将body元素逐渐淡入页面，但是它已经存在。

我最好的建议是在body的background-image属性上使用CSS过渡：

body {
    -webkit-transition: background-image 0.2s ease-in-out;
    transition: background-image 0.2s ease-in-out;
}