jquery - jQuery淡出图像

Question

我有一个代码可以为每个固定的时间间隔更改图像，但是这个图像通常是在变化的。如何在我的代码中使用淡出选项，以便它慢慢淡出以打开新图像。我的代码如下

$(document).ready(function() {
        (function() {
            var curImgId = 0;
            var numberOfImages = 2;
            window.setInterval(function() {
                $('body').css('background-image','url(bg' + curImgId + '.jpg)');
                curImgId = (curImgId + 1) % numberOfImages;
            }, 15 * 100);
        })();
 });

Answer 1

你可以看看这个线程：
CSS3 background image transition。
这是一个很好的css解决方案。

Answer 2

您不能淡化背景图像..您只能淡化元素（但淡化body也会淡化所有内容）

您需要将其添加为元素并将其放在所有其他元素的后面.. 并使用和淡化该.fadeIn()元素.fadeOut()

Answer 3

您可以将元素的不透明度淡化为零，然后更改背景图像，然后将其淡化回 1：

$(document).ready(function() {
        (function() {
            var curImgId = 0;
            var numberOfImages = 2;
            window.setInterval(function() {
                $('body').fadeTo(500, 0, function(){
                    $(this).css('background-image','url(bg' + curImgId + '.jpg)');
                    $(this).fadeTo(500, 1);
                });
                curImgId = (curImgId + 1) % numberOfImages;
            }, 15 * 100);
        })();
 });