javascript - jQuery 背景图像在计时器上变化

Question

我有一个 div:

<div class="coverImage" style="background-image:url('3.2.5\\assets\\img\\backgroundCanvas1.jpg');"></div>

以及附加的 jQuery 脚本，用于每 20 秒旋转一次背景

var coverChange =
{
    init: function()
    {

        var itemInterval = 20000;

        var numberOfItems = 4;

        var currentItem = 1;

        $('.coverImage').attr("style", "background-image:url('3.2.5/assets/img/backgroundCanvas"+currentItem+".jpg'");

        //loop through the items
        var infiniteLoop = setInterval(function(){
            $('.coverImage').attr("style", "background-image:url()");

            if(currentItem == numberOfItems -1){
                currentItem = 1;
            }else{
                currentItem++;
            }
            $('.coverImage').attr("style", "background-image:url('3.2.5/assets/img/backgroundCanvas"+currentItem+".jpg'");

        }, itemInterval);
    }
};

coverChange.init();

当图像发生变化时，下半部分会变白，直到我稍微滚动。我的主要要求是帮助新图像的淡入。 (其他都是次要的)

我尝试过使用 jQuery fadeIn 属性，但无法让它以无缝且美观的方式工作。

正如你所知，我并不是在寻找代码优雅的功能:-)

P.S 最初通过 CSS 加载图像不起作用。

Answer 1

您应该能够向 coverImage 元素添加简单的 CSS 过渡。

.coverImage {
    transition: background 1s;
}

我在 https://jsfiddle.net/mark_c/pa44n42k/1/ 创建了一个工作示例