Question

我尝试使用以下代码fadeOut /在background-image body属性中：

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

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

我最好的建议是在background-image的{{1}}属性上使用CSS转换：

body

如何使用JavaScript fadeOut / In background-image？

1 个答案: