1

ページの読み込み時に特定のクラスを除いて、ページ全体の不透明度をフェードアウトしたい。（タイマー）

現在のコードに微調整できます。

4

2 に答える 2

4

フェードしたくない要素が本体の直接の子孫である場合は、1 行で行うことができます。

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

デモ: http://jsfiddle.net/Be2m5/

(明らかに、必要に応じて独自のアニメーション メソッドに置き換えることができます。)

フェードしたくない要素が他の要素の子孫である場合、親要素がフェードすると子も一緒に連れて行くため、どのように機能させるかわかりません...

EDIT：これについてもっと良い方法があることに気づきました：要素をフェードインおよびフェードアウトするのではなく、ページ全体に単一の空白（白い背景）の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>

2つのdivコンテナ。1つ目はページの読み込み時に非表示になり、2つ目は表示になります。

デモ

于 2012-07-10T10:13:45.567 に答える