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

尽情享受 :)

更新：

为了避免文字被遮盖，有两种方法，要么你 and apply the opacity to that new DIV or you create a pseudo-element。之前已经在 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/

淡入新背景图片 Jquery

FadeIn new background image Jquery

javascript

jquery

fade

fadeout

fadein