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