Исчезновение родительского элемента, а не его дочерних элементов

#jquery #delay #fadein #fadeout

#jquery #задержка #fadein #исчезновение

Вопрос:

У меня есть страница с фоновым изображением и слайдером. Оба они исчезают и исчезают одновременно. Проблема в том, что когда я применяю затухание к 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>`

1. Я не уверен, что понимаю… вы хотите скрыть div, но не содержимое div? Что именно вы бы тогда исчезли?

2. БенМ прав, я хочу затухать изображение в #background div, но не содержимое в нем.

Ответ №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');

Ответ №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>

Теперь вы можете делать с фоном все, что захотите, не влияя на содержимое.