Question

我希望淡出整个页面的不透明度，除了页面加载上的某个类。（定时器）

我可以将它调整到我当前的代码中。

Answer 1

如果您不想褪色的元素是身体的直接后代，那么您可以在一行中完成：

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

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

（显然你可以根据需要替换你自己的动画方法。）

~~如果你不想褪色的元素是其他元素的后代，我不知道你是如何使它工作的，因为当父元素消失时，他们带着他们的孩子......~~

编辑：我想到有更好的方法可以解决这个问题：不要将元素淡入和淡出，在整个页面上放置一个空白（白色背景）div淡入它以覆盖除“.nofade”之外的所有其他元素。为“.nofade”元素提供比空白div更高的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

Answer 2

您可以尝试这样的事情

<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

淡出整个页面，但某些课程除外

2 个答案: