1

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

我将能够将其调整到我当前的代码中。

4

2 回答 2

4

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

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

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

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

如果您不想淡出的元素是其他元素的后代，我不确定您是如何使其工作的，因为当父元素淡出时，它们会带走他们的孩子......

编辑：我想到有一种更好的方法来解决这个问题：与其淡入淡出元素，不如在整个页面上放置一个空白（白色背景）div，然后淡入以覆盖所有其他元素，除了对于“.nofade”。给“.nofade”元素一个高于z-index空白 div 的值：

<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-10T10:10:45.063 回答
0

你可以试试这样的

<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 容器。首先是隐藏页面加载，其次是显示。

演示

于 2012-07-10T10:13:45.567 回答