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

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

您需要将其添加为元素并将其置于其他所有元素之后..并使用.fadeIn()和.fadeOut()

淡化该元素

Answer 2

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

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);
        })();
 });

jQuery淡出图像

3 个答案: