4

ページ遷移を適用するためにいくつかのjQueryコードに取り組んでいます。jQueryコードでやりたいことは、基本的に次のようにページのフェードイン効果を適用することです:

$("body").css("display", "none");
$("body")().fadeIn(400);

ページが読み込まれると、ページがリロードされ、指示されたフェードイン効果が発生しますが、私がやりたいのは、最初からWebページ全体のフェードイン効果であり、試してみました:

$(document).load(function() {

ただし、これは機能しません。私もこのコードを無駄にしようとしました：

$("body").load().css("display", "none");
$("body").load().fadeIn(400);

コード ブロックに目に見えるエラーがあり、それを修正して目的の動作を適用することはできますか? または、コミュニティは、私が目指していることの正しい実装を示すガイドに誘導してもらえますか?

4

4 に答える 4

2

これを.cssファイルに入れることができます-

body { display:none; }

または、そのようにインラインで配置することもできます -

<body style="display:none;" >

そして、$(document).ready()コールバックでこれを使用してフェードインします-

$(document).ready(function(){
   $("body").fadeIn(400);
});

ブラウザは、css最初にファイルに従って HTML をレンダリングします。そのため、ブラウザーが<body>タグをレンダリングするようになると、そのdisplayプロパティを に設定する必要があることを示す css ルールが表示されnoneます。すべての HMTL がロードされ、 jQuery の準備が整った ( $(document).ready()) 後でのみ、 ; を呼び出すことができますfadeIn()。

于 2012-05-20T17:15:44.903 に答える
1

CSS を使用して、ページ全体を非表示または非表示に設定できます。

body {
    display: none;
}

または：

body {
    visibility: hidden;
}

これは、 内のインライン CSS として設定できます<head>。次に、jQuery 内で、ロード後にフェードインすることができます。

于 2012-05-20T17:16:13.203 に答える
0 
//    $("body")().fadeIn(400); // this is incorrect, try with:
$('body').fadeIn(400);

つまり、次のことを意味します。

$("body").css("display", "none");

$(window).load(function(){  // use "window"
  $('body').fadeIn(400);
});

またはdisplay:none;、CSS から直接設定することもできます (必要に応じて異なります)。

body{
  display:none;
}
于 2012-05-20T17:16:42.970 に答える
0

DOM ではなくウィンドウでロードを使用する必要があります。

試す ：

   $(window).load(function(){

    $("body").css("display", "none");
    $("body").fadeIn(400);

})

さらに説明するには、ここを試してください

于 2012-05-20T17:17:08.083 に答える