JQuery FadeIn - 淡入背景图像 div 但不淡入内容 div？

Question

我有一段时间试图弄清楚如何做到这一点：

有关该问题的实时示例，请参见http://webid3.feckcorp.com 。

我想使用 JQuery 淡入<div id="home_page_back"> （在主要内容后面包含垂直排列的灰色背景），但不淡入它前面包含在<div id="content" class="container">中的内容<div id="content" class="container"> 。

现在，我似乎只能让它淡入所有内容，而我只希望背景 div 淡入。

任何可以阐明解决方案并帮助我解决问题的人将不胜感激。

干杯

解决了

我将 div 的 z-index 调整为 -1 并将其绝对定位。 就这么简单：

z-index:-1;
position:absolute;

Answer 1

您只有 2 个选择：
1- 将content div 放在home_page_back之外
2- 使用 css3 规则： background-color: rgba(255,0,0,1); 对于content div

顺便说一句，这是一个纯粹的 css 问题而不是 jquery 问题，即任何透明元素都会使其所有子元素都具有相同的透明性。

CSS3 解决了这个问题，通过使用rgba 颜色，您可以使用它的最后一个值来控制不透明度，并且不会影响内部元素。

您可以在谷歌第一搜索结果中检查这两种方式的许多解决方案。

Twitter 正在使用此 CSS3

更新：
jquery 似乎不支持 RGBA，因此您可能需要一个插件，或者只是在 css 中创建一个 class 并将其提供给该父元素。

Answer 2

由于#content是#home_page_back的子项，因此在父项中淡出自然会在所有子项中淡出。 考虑提取#home_page_back div 并将其作为#content的兄弟。 您仍然可以通过 CSS 获得所需的尺寸。

Answer 3

我认为这样的事情应该有效：

$(document).ready(function () {
$("#home_page_back").hide();
$("#content").fadeTo(0, 0);
$("#home_page_back").fadeIn(500, function(){
    $("#content").fadeTo(500, 1);
    });     
});

你也可以使用$("#content").hide(); ，但是像这样，当您需要显示#content时，您可能会获得更平滑的淡入淡出。