Fade out on the parent not its children
I have a page with a back ground image and a slider. Both of them are fadout and fadding in at the same time. The problem is that when i apply fadeout to the div containing the background image its children div also fadeout. Is there a way to avoid that.
<div id="background">
..... // all the page content goes he开发者_开发技巧re.
<div id="slider">
</div>
</div>
<script>
function fade(){
$('#background').dealy(5000).fadeout(1000,function(){//change the image}).fadein(1000, fade() );
//same for slider
}
</script>`
If I understand the OP's question, he wants to fade out the background image of #background but none of its children or content.
If I understand correctly, you should create two classes for the #background div as follows:
div#background.nobg {
background-image: none;
background-color: transparent;
}
div#background.hasbg {
background-image: url('url/to/bg.png');
}
And then using jQuery you can animate the class attribute as follows:
$('#backround').animate({ 'class': 'hasbg' }, 'slow', 'easein');
I believe a much simpler solution would be to put the background in a separate div with a low z-index and position fixed.
<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>
Now you can do whatever you want with the background without affecting the content.
加载中,请稍侯......
精彩评论