특정 클래스를 제외하고 페이지 전체가 사라집니다.

페이지로드시 특정 클래스를 제외하고 페이지 전체가 불투명 해지기를 원합니다. (타이머)특정 클래스를 제외하고 페이지 전체가 사라집니다.

내 현재 코드로 조정할 수 있습니다. 당신이 퇴색하지 않을 요소가 신체의 직계 자손 인 경우

2012-07-10 Andrew Dom Zappa

가 페이지의''? –

지금까지 해보신 것은 무엇입니까? 어떤 코드 또는 jsfiddele을 게시하는 것은 어떻습니까? 또한,'.certain_class'를 페이드 아웃 상태로 유지 하시겠습니까? 아니면 머뭇 거리는가? – Jeemusu

당신은 하나 개의 라인에서 작업을 수행 할 수 있습니다

$("body").find(":not(.nofade)").fadeOut().fadeIn(); // fade out/in all but class "nofade"

데모 : http://jsfiddle.net/Be2m5/

(물론 당신은 대체 할 수 있습니다 자신의 애니메이션 방법을 원하는대로 설정하십시오.)

퇴색하지 않으려는 요소가 다른 요소의 하위 항목 인 경우 부모 요소가 사라질 때 자식을 가져 가기 때문에 어떻게 작동하는지 잘 모르겠습니다. 그들과 함께 ...는

편집 : 이것에 대해 갈 수있는 더 좋은 방법이 있다는 것을 나에게 발생 :보다는 요소와 아웃 페이드은 전체에 걸쳐 하나의 빈 (흰색 배경) 사업부를 넣어 페이지를 지우고 ".nofade"를 제외하고 다른 모든 요소를 가리도록 페이드 인합니다. z-index 높은 빈 DIV보다 ".nofade"요소에게 보내기

는

<style> 
.cover { 
    position : absolute; 
    top : 0px; bottom : 0px; left : 0px; right : 0px; 
    background-color: white; 
    z-index: 1; 
    opacity : 0; 
} 
.nofade { 
    position: relative; 
    z-index: 2; 
}  
</style> 
<script> 
$(document).ready(function() { 
    $("<div/>").addClass("cover") 
       .appendTo("body") 
       .animate({opacity:1}, 1000).delay(300) 
       .animate({opacity:0}, 1000, function() { $(this).remove(); }); 
}); 
</script>

데모 : http://jsbin.com/ucofuz/2/edit#preview

출처

2012-07-10 10:10:45 nnnnnn

이

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#content-wrapperHide').fadeOut(1000);   
      $('#content-wrapperShow').fadeIn(1000); 
     }); 
    </script> 

    <style type="text/css"> 
     #content-wrapperShow 
     { 
      display: none; 
     } 
    </style> 
</head> 

<body> 
    <script type="text/javascript"> 
     <!--//--><![CDATA[//><!-- 
      document.write('<div id="content-wrapperHide">'); 
     //--><!]]> 
    </script> 
    Hide on load 
    <script type="text/javascript"> 
     <!--//--><![CDATA[//><!-- 
      document.write('</div><!-- content-wrapperHide -->'); 
     //--><!]]> 
    </script> 


    <script type="text/javascript"> 
     <!--//--><![CDATA[//><!-- 
      document.write('<div id="content-wrapperShow">'); 
     //--><!]]> 
    </script> 
    Show on load 
    <script type="text/javascript"> 
     <!--//--><![CDATA[//><!-- 
      document.write('</div><!-- content-wrapperShow -->'); 
     //--><!]]> 
    </script> 
</body> 
</html>

두 사업부 컨테이너처럼 뭔가를 시도 할 수 있습니다. 첫 번째는 페이지로드에 숨어 있으며 두 번째 페이지가 표시됩니다. 당신의`.timer` 요소의 직접적인 아이

demo

출처

2012-07-10 10:13:45 roma

특정 클래스를 제외하고 페이지 전체가 사라집니다.

답변

관련 문제