淡入淡出整個頁面，除了某些類別

我想淡出整個頁面的不透明度，然後除了頁面加載時的某個類別。（定時器）淡入淡出整個頁面，除了某些類別

我可以將它調整到我當前的代碼中。

2012-07-10 Andrew Dom Zappa

是您'.timer'元素的直接子頁面的''？ – 2012-07-10 09:51:30

你到目前爲止嘗試過什麼？如何發佈一些代碼或jsfiddele？另外，您是否希望'.certain_class'保持淡出狀態？或保持消失？ – Jeemusu 2012-07-10 09:54:41

如果你不想褪色的元素是人體的直接後裔，那麼你可以做一個行：

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

演示：http://jsfiddle.net/Be2m5/

（很明顯，你可以替換你根據需要自己的動畫方法。）

~~如果你不想淡化的元素是其他元素的後代我不知道你是如何使它工作的，因爲當父元素淡入淡出時，他們帶着他們的孩子與他們...~~

編輯：它發生，我認爲有一個更好的方式去了解這一點：不是淡入和淡出的元素，把一個空白（白色背景）DIV在整個頁面並將其淡入以涵蓋除「.nofade」之外的所有其他元素。給「.nofade」元素比空白格較高z-index：

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

兩個DIV容器。首先是隱藏在頁面加載，第二個顯示。

demo

來源

2012-07-10 10:13:45 roma

淡入淡出整個頁面，除了某些類別

回答

相關問題