淡入除某些类以外的整个页面

Fade entire page except certain class

本文关键字：淡入      更新时间：2023-09-26

除了页面加载时的某个类之外，我想先淡出整个页面的不透明度。（计时器）

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

如果不想淡化的元素是主体的直接后代，那么可以在一行中完成：

$("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

您可以尝试类似的

<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容器。第一个是隐藏页面加载，第二个是显示。

演示

相关文章：