计时器上的jQuery背景图像更改

Question

我有一个div：

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

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

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

当图像改变时，它恰好变白了下半部分，直到我稍微滚动。我的主要要求是帮助创建新图像的fadeIn。(其他一切都是次要的)

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

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

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

Answer 1

您应该能够向coverImage元素添加一个简单的CSS转换。

.coverImage {
    transition: background 1s;
}

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

Answer 2

要获得淡入淡出效果，只需在此步骤之前淡出div即可：

$('.coverImage').attr("style", "background-image:url()");

然后在这一步之后淡入：

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

对于淡入淡出，您可以使用简单的jquery，因为我想您已经这样做了，但不是正确的方式，所以祝您好运。

这将给你一个很好的淡入/淡出效果。:)