Take the 2-minute tour ×

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 here. 
   <div id="slider">


 function fade(){  
 $('#background').dealy(5000).fadeout(1000,function(){//change the image}).fadein(1000, fade() );
 //same for slider
share|improve this question
I'm not sure I understand... you want to fade out a div, but not the contents of the div? What exactly would you be fading out then? –  asawyer Sep 28 '11 at 13:26
BenM is right, I want to fade out the image in the #background div but not the content in it. –  user969131 Sep 28 '11 at 14:20
add comment

2 Answers

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');
share|improve this answer
This would only work with jQuery UI. jQuery does not animate classes. –  Seth Sep 28 '11 at 13:36
add comment

I believe a much simpler solution would be to put the background in a separate div with a low z-index and position fixed.

    #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;}
    <div id="background"></div>
    <script type="text/javascript">
    $('#background').delay(5000).fadeOut(1000,function(){ $('#background').fadeIn(1000).css('background-color','#f00');});

Now you can do whatever you want with the background without affecting the content.

share|improve this answer
add comment

Your Answer


