計時器上的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屬性，但是無法使其以無縫的美觀方式工作。

正如您所知道的，我不是在尋找僅代碼優雅的功能：-)

PS最初通過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，因為我想您已經擁有了但不是正確的方法，所以祝您好運。

這將為您提供良好的淡入/淡出效果。 :)