web-dev-qa-db-ja.com

jQueryは、ロードされるとサイト/コンテンツでフェードインしますか？

コンテンツが基本的にスムーズに表示されるように、適切に読み込まれたサイトをフェードインして表示するためのチュートリアルやプラグインはありますか？

ヘッダーまたはフッターは前のページからすでにキャッシュされているので、特定の領域だけの方が簡単だと思います...

たとえば、さまざまなサムネイルを含むポートフォリオページは、準備ができたときにのみスムーズに表示されます。

これはできますか？

助けてくれてありがとう:)

jqueryhtmljquery-pluginsloadfade
9
Jezthomp

はい、コンテンツをdivでラップします（例：<div id="main-content">）そしてあなたのcssにこれを入れてください：

div#main-content { display: none; }

次に、このスクリプトを使用します。

$(document).ready(function() {
    $('#main-content').fadeIn();
});
17
Yes Barry

まず、副次的な点：一般に、Webデザイナーは、知覚されるページの読み込み時間を改善するために多くの時間を費やし、できるだけ早く表示されるようにします。これは積極的に逆になり、すべての準備が整うまで空白のページが表示されますが、これは理想的ではない場合があります。

しかし、それがあなたの状況に適切である場合：

表示されるものはすべてbodyの子孫になるため、bodyを非表示にしてロードし、フェードインすることができます。JavaScriptを使用しないユーザーのフォールバックを含めることが重要です（通常、で2％未満）。少なくとも Yahooによると 、しかしそれでも）。したがって、次の線に沿って：

（ライブコピー）

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<!-- This next would probably be in your main CSS file, but shown
     inline here just for purposes of the example
-->
<style type="text/css">
body {
    /* Hide it for nifty fade-in effect */
    display: none;
}
</style>
<!-- Fallback for non-JavaScript people -->
<noscript>
<style type="text/css">
body {
    /* Re-displays it by overriding the above */
    display: block;
}
</style>
</noscript>
</head>
<body>
...content...
<script src="jquery.js"></script>
<script>
// This version runs the function *immediately*
(function($) {

  $(document.body).fadeIn(1000);

})(jQuery);
</script>
</body>
</html>

フェードインをいつ発生させたいかに応じて、そのスクリプト部分のいくつかのバリエーション：

「準備完了」イベントを待つ：

ライブコピー

// This version waits until jQuery's "ready" event
jQuery(function($) {

  $(document.body).fadeIn(1000);

});

を待つ window#loadイベント：

ライブコピー

// This version waits until the window#load event
(function($) {

  $(window).load(function() {
    $(document.body).fadeIn(1000);
  });

})(jQuery);

window#loadすべての外部リソース（すべての画像を含む）がロードされた後、ページのロードプロセスの後半にveryが発生します。しかし、あなたはすべてがロードされるまで待ちたいと言ったので、それがあなたがやりたいことかもしれません。それは間違いなくあなたのページを遅く見せます...

28
T.J. Crowder

これを実現する別の方法は、Animate.cssプロジェクトを使用することです。その純粋なCSSなので、JSに依存する必要はありません。

https://daneden.me/animate/

'animated'クラスと 'fadeIn'クラスを親要素に追加するだけで、すべての子がフェードインします。

5
direct

jQuery(document).ready(function(){
jQuery("#container").fadeIn();
});

ここで、containerは、コンテンツ全体を含むdivのIDです。

1
sushil bharwani
$(document).ready(function() {
    $('body').hide().fadeIn('fast');
});
1
Stefan Endres
div#main-content { display: block; }

Javascriptの有無にかかわらず動作させるには、次を使用できます

document.getElementById("#main-content").style.display = "none";

次に、このスクリプトを使用します。

$(document).ready(function() {
 $('#main-content').fadeIn();
});
0
user3686007