淡出父母而不是孩子答案

【问题标题】：Fade out on the parent not its children淡出父母而不是孩子
【发布时间】：2011-09-28 13:24:41
【问题描述】：

我有一个带有背景图像和滑块的页面。两者同时淡出和淡出。问题是，当我将淡出应用于包含背景图像的 div 时，其子 div 也会淡出。有没有办法避免这种情况。

<div id="background">
..... // all the page content goes here. 
   <div id="slider">
   </div>

</div> 

<script>  
 function fade(){  
 $('#background').dealy(5000).fadeout(1000,function(){//change the image}).fadein(1000, fade() );
 //same for slider
 }     
</script>`

【问题讨论】：

我不确定我是否理解...你想淡出一个 div，而不是 div 的内容？那你到底会淡出什么？
BenM 是对的，我想淡出#background div 中的图像，而不是其中的内容。

标签： jquery delay fadein fadeout

【解决方案1】：

如果我理解 OP 的问题，他想淡出 #background 的背景图像，但没有它的子元素或内容。

如果我理解正确，您应该为#background div 创建两个类，如下所示：

div#background.nobg {
    background-image: none;
    background-color: transparent;
}

div#background.hasbg {
    background-image: url('url/to/bg.png');
}

然后使用 jQuery 可以为class 属性设置动画，如下所示：

$('#backround').animate({ 'class': 'hasbg' }, 'slow', 'easein');

【讨论】：

这只适用于 jQuery UI。 jQuery 不对类进行动画处理。

【解决方案2】：

我相信一个更简单的解决方案是将背景放在一个单独的 div 中，具有低 z-index 和固定位置。

<head>
    <style>
    #background{position:fixed; top: 0; left:0; height:100%;width:100%; z-index: 0; background-color:#00f;}
    #content{ z-index:1; background-color:white; height:50%;width:50%; position:absolute;}
    </style>
</head>
<body>
    <div id="content">Content goes here</div>
    <div id="background"></div>
    <script type="text/javascript">
    $('#background').delay(5000).fadeOut(1000,function(){ $('#background').fadeIn(1000).css('background-color','#f00');});
    </script>
</body>

现在你可以在不影响内容的情况下对背景做任何你想做的事情。

【讨论】：