Question

我有一个带有背景图像和滑块的页面。他们俩同时都是时尚和笨拙的。问题是，当我将fadeout应用于包含背景图像的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>`

Answer 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');

Answer 2

我认为一个更简单的解决方案是将背景放在一个单独的div中，z值低且位置固定。

<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>

现在，您可以使用背景执行任何操作，而不会影响内容。

淡出父母而不是孩子

2 个答案: