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

Question

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

请参阅http://webid3.feckcorp.com了解问题的实例。

我想使用JQuery淡入<div id="home_page_back">（包含主要内容后面垂直排列的灰色背景），但不会淡化<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-对background-color: rgba(255,0,0,1); div

使用css3规则：content

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

CSS3通过使用rgba color解决了这个问题，你可以在其中使用它的最后一个值来控制不透明度，它不会影响内部元素。

您可以围绕这些双向on google首次搜索结果检查许多解决方案。

Twitter正在使用这个CSS3

<强>更新
它接缝是jquery不支持RGBA所以你可能需要plugin，或者只是在css中创建一个类并将它提供给那个父元素。

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时，你可能会得到更平滑的淡入淡出。