添加淡入淡出到图像过渡

Question

我有一个不断变化的背景图片，目前使用此脚本。我不是一个JavaScript专家，并希望在从一张幻灯片转换到另一张幻灯片时添加淡入淡出效果。我需要添加什么？

function changeBgImage (image, id) {
var element = document.getElementById(id);
element.style.backgroundImage = "url("+image+")";
}

一如既往地谢谢！

Answer 1

你必须包含jquery.js并在更改背景之前使用element.fadeOut（），在更改背景之后使用element.fadeIn（），如下所示：

var element = document.getElementById(id);
$('#' + id).fadeOut();
element.style.backgroundImage = "url("+image+")";
$('#' + id).fadeIn();

在你的html文档的头部包含jquery：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>