부모가 자녀가 아닌 페이드 아웃합니다.

나는 배경 이미지와 슬라이더가있는 페이지가 있습니다. 둘 다 파ド 아웃 (fadout)과 동시에 패딩 (fadding)됩니다. 문제는 내가 배경 이미지를 포함하는 div에 fadeout을 적용 할 때 자식 div도 fadeout입니다. 이를 피할 수있는 방법이 있습니까? 나는 OP의 질문을 이해한다면부모가 자녀가 아닌 페이드 아웃합니다.

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

출처

2011-09-28 Paneri

내가 이해할 수 있는지 잘 모르겠다 ... 당신은 div를 퇴색시키고 싶지만 div의 내용은 원하지 않습니까? 그렇다면 정확히 어떤 것이 사라질 것입니까? – asawyer

BenM이 맞습니다. #background div에서 이미지를 페이드 아웃하고 싶지만 그 안의 내용은 페이드 아웃하지 않겠습니다. – Paneri

, 그는 배경 #background의 이미지하지만 어린이나 내용 없음을 페이드 아웃 싶어. 다음과 같이이 class 속성에 애니메이션을 적용 할 수 jQuery를 사용하여 다음

div#background.nobg { 
    background-image: none; 
    background-color: transparent; 
} 

div#background.hasbg { 
    background-image: url('url/to/bg.png'); 
}

을 : 그리고 만약 내가 제대로 이해하고

, 당신은 다음과 같이 #backgrounddiv 두 가지 클래스를 작성해야합니다

$('#backround').animate({ 'class': 'hasbg' }, 'slow', 'easein');

출처

2011-09-28 13:34:53 BenM

이것은 jQuery UI에서만 작동합니다. jQuery는 클래스를 애니메이트하지 않는다. – Seth

저는 믿습니다 훨씬 간단한 해결책은 Z- 인덱스가 낮고 위치가 고정 된 별도의 div에 배경을 배치하는 것입니다.

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

이제 콘텐츠에 영향을주지 않고 원하는대로 배경으로 할 수 있습니다.

출처

2011-09-28 14:08:16

부모가 자녀가 아닌 페이드 아웃합니다.

답변

관련 문제