FadeIn new background image Jquery

Question

我有一个定义了背景图片的div：

#section0{
        background-image: url("images/top_back2.jpg");
    }

我有一个setTimeout函数，可在3秒后将背景图像更改为其他图像

    $("#section0").css("background-image", "url(images/top_back.jpg)");
        }, 3000);

这很好用，但是无论尝试如何，我似乎都无法制作此图像淡入。

任何想法都会受到赞赏，它只是像这样出现在屏幕上，非常震撼。我无法将CSS3淡入添加到整个元素中，因为在开始的3秒钟内未显示其中的内容，因此我需要将其显示。

谢谢！

Answer 1

您还必须定义其淡入淡出的方式，可以使用opacity实现此效果，然后使用transition参数定义动画属性，例如持续时间和缓动。

CSS：

#section0{
     opacity: 0;
     transition: opacity 2s; /* Define the duration of the opacity animation */
     background-image: url("images/top_back2.jpg");
}

JavaScript（在setTimeout内部）：

$("#section0").css({
     "opacity" : 1,
     "background-image": "url(images/top_back.jpg)"
});

这里是在JSFiddle上的演示，其中包含代码https://jsfiddle.net/wtbmdaxc/

享受:)

Answer 2

James Wong的答案是一个很好的CSS3解决方案。如果您正在寻找仅jQuery的解决方案，请在下面尝试以下代码段。

const fadeSpeed = 2000; // two seconds

$('#section0').animate({
  opacity: 1
}, fadeSpeed);

#section0 {
  opacity: 0;
  height: 400px;
  width: 500px;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/2/28/HelloWorld.svg/512px-HelloWorld.svg.png');
  background-repeat: no-repeat;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="section0">
</div>