Jquery 加载时淡入淡出div背景

我正在处理加载时淡入淡出的div背景，我发现了以下示例： 唯一的问题是如果隐藏整个DIV并将其淡入淡出，但我只需要淡出DIV背景。 因此，从一开始就会显示包含文本或一些html的DIV，加载时其背景会褪色

<div style="border: 1px solid #000000;">
<div class="feature">some text and info here</div></div>

这里有一些文字和信息

您不能只淡入背景div（因为，通过继承，所有子项也将淡入）。但是，您可以将设置好的css属性更改为“默认”属性，或者仅为加载目的创建一个类

例如：

HTML:

JS:

---

不能仅淡入背景div（因为，通过继承，所有子项也将淡入）。但是，您可以将设置好的css属性更改为“默认”属性，或者仅为加载目的创建一个类

例如：

HTML:

JS:

---

绝对将文本放置在图像顶部，淡入会影响整个内容，因为文本位于淡入的div中

小提琴示例：

HTML

JS

---

绝对将文本放置在图像顶部，淡入会影响整个内容，因为文本位于淡入的div中

小提琴示例：

HTML

JS

---

是的，但是stil DIV和“这里的一些文本和信息”只有在生效后才会显示，而且“这里的一些文本和信息”在生效之前应该是可见的，然后你只需要不隐藏该DIV。你想改变背景吗？对，但出于某种原因，我仍然不理解你所说的：（有一种更简单的方法可以做到这一点，你可以为你的父div创建一个类

load

，并设置你的自定义css，在页面加载后你只需删除该类是的，但是stil div和“这里的一些文本和信息”只会在效果和“这里的一些文本和信息”之后显示。）Inode在生效之前就应该可见，然后你只需要不隐藏该div。你只想更改背景，对吗？对，但出于某种原因，我仍然不理解你所说的：（有一种更简单的方法可以做到这一点，你可以为你的父div创建一个类

load

，并设置你的自定义css，在页面加载后你只需删除该类。让我理解：你想让内容可见，并用fadeIn效果制作背景动画。对吗？让我理解：你想让内容可见，并制作动画，只是t。）背景具有fadeIn效果。对吗？在你的演示中，backgorund显示和隐藏，但pont是从一开始就显示文本的DIV，只有背景在加载时会淡出，并保持不变。是的，修复了，缺少两行CSSright，但仍然。加载时背景应为fadeIn，所以内容（文本）它从一开始就显示出来，但一旦页面加载，背景就会消失。在我们的例子中，它是渐弱的(（对不起，误解了，修正了，新提琴。还添加了一个容器，使文本在div中很好地居中。在您的演示中，backgorund显示和隐藏，但pont是从开始显示文本的div，只有背景在加载时淡入淡出，而staysYeah，修正，缺少两行CSSright，但仍然。加载时背景应淡入淡出，因此内容（文本）它从一开始就显示出来，但一旦页面加载，背景就会消失。在我们的例子中，它是渐弱的（（对不起，误解了，修复了，新的小提琴）。还添加了一个容器，使文本在div中很好地居中。

<div id="parent" class="loading">
  <div class="feature">some text and info here</div>
</div>

.loading {
  background-color: black;
}

$(document).ready(() => $('#parent').removeClass('loading'));

<div class="container">
  <div class="bgImageContainer"></div>
  <div class="feature"><span>Some text and stuff here</span></div>
</div>

.feature {
   width:100%;
   background:#fff;
   z-index:100;
   position: relative;
   top: 50%;
   transform: translateY(-50%);
 }
 .container {
   height: 400px;
   width: 100%;
 }
 .bgImageContainer {
   display: none;
   background-color: white;
   background-image: url("https://placeimg.com/760/460/tech");
   background-size: cover;
   height:400px;
   width: 100%;
   z-index:0;
   position: absolute;
 }

$(document).ready(function(){
    $(".bgImageContainer").fadeIn('slow');
})