如何使用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;
}