淡入新背景图片 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/

享受 ：）

更新：

为了避免文本被覆盖，有两种方法可以做到，要么将背景图像分离到另一个 DIV 中并将不透明度应用于该新 DIV，要么创建一个伪元素。之前已经在 SO 上回答了这两个问题。

让我们尝试第一种方法，它将如何在您的情况下工作

HTML：

<div id="section0">

  Example test. Lorem ipsum dolor sit amet.

  <div id="bg-opacity"></div>

</div>

CSS：

#section0{

}

#section0 #bg-opacity{

     position: absolute; /* Force this layer to appear at the top left of the div */

     top: 0;

     left: 0;

     z-index: -1; /* Makes the image appear in the back and not covering the texts */

     opacity: 0;

     transition: opacity 2s; /* Define the duration of the opacity animation */

     height: 500px;

     width: 500px;

     background-image: url("https://media.giphy.com/media/tIeCLkB8geYtW/giphy.gif");

}

JavaScript：

setTimeout(function(){ 

  $("#bg-opacity").css({

       "opacity" : 1,

       "background-image": "url(https://media.giphy.com/media/tIeCLkB8geYtW/giphy.gif)"

  });

}, 300);

还有一个关于 JSFiddle 的新演示：https ://jsfiddle.net/zr7Lf0m5/