Исчезают родители не своих детей - PullRequest
Новая
       35

Исчезают родители не своих детей

1 голос
/ 28 сентября 2011

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

Ответы [ 2 ]

0 голосов
/ 28 сентября 2011

Я считаю, что гораздо более простым решением было бы поместить фон в отдельный 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>

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

0 голосов
/ 28 сентября 2011

Если я понимаю вопрос ОП, он хочет скрыть фоновое изображение #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');
...