Question

我有一个div：

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脚本，每20秒旋转一次背景

sum=0;
for(i=0;i<n;i++)
  for(j=0;j<i*i;j++)
    for(k=0;k<j;k++)
      sum++;

当图像发生变化时，它会在下半部分变白，直到我略微滚动。我的主要问题是帮助淡化新图像。（其他一切都是次要的）

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

我不是在寻找代码优雅的功能，你可以告诉： - ）

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

Answer 1

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

age_of_email

我在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，因为我认为你已经拥有但不是正确的方式，所以祝你好运。

这会给你一个很好的淡入/淡出效果。：）

jQuery背景图像更改计时器

2 个答案: