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

How to fadeOut/In background-image using JavaScript?

本文关键字：输入 背景 图像 淡出 何使用 JavaScript      更新时间：2023-09-26

我正在尝试使用以下代码淡出/在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);

但它没有用。

你的目标是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;
}
相关文章：