jquery - 我可以淡入背景图像吗(CSS : background-image) with jQuery?

Question

我有一个 div 元素，里面有文本和一张背景图片，这是通过 CSS 属性 background-image 设置的。是否可以通过 jQuery 淡入背景图像？

div {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url(http://upload.wikimedia.org/wikipedia/commons/8/84/Konqi_svg.svg);
  border: 1px solid #666;
  height: 10em;
}

<div>Text</div>

编辑

我做了一个 fiddle举例说明我的情况。基本上，这会配置初始 background-image 和 transition，并使用 jQuery 更改 background-image。在我的测试中，两张图片之间没有动画过渡。

EDIT2

我修改了fiddle作品!

Answer 1

我一直在寻找多年，最后我把所有的东西放在一起找到了我的解决方案。人们说，您不能淡入/淡出 html 背景的背景图像 ID。这绝对是错误的，因为您可以通过实现下面提到的演示来弄清楚

CSS:

html, body

height: 100%;   /* ges Hoehe der Seite -> weitere Hoehenangaben werden relativ hierzu ausgewertet */
overflow: hidden;   /*  hide scrollbars */
opacity: 1.0;
-webkit-transition: background 1.5s linear;
-moz-transition: background 1.5s linear;
-o-transition: background 1.5s linear;
-ms-transition: background 1.5s linear;
transition: background 1.5s linear;

现在可以使用 JavaScript 轻松更改主体的背景图像:

switch (dummy)

case 1:

$(document.body).css({"background-image": "url("+URL_of_pic_One+")"});
waitAWhile();

case 2:
$(document.body).css({"background-image": "url("+URL_of_pic_Two+")"});
waitAWhile();