jQueryを使ったページ読み込みエフェクト

投稿日: 2019-11-05 2019-11-05
タグ: jquery, jquery effects

JQuery

は本当に便利で便利なJavaScriptライブラリです。ページやコンテンツの読み込みの効果は、jQueryで非常に簡単に実装できます。ここでは、Webページのコンテンツをフェードインのページ読み込みエフェクトとして表示する例を示します。それはあなたの読者に衝撃的な印象を与えるでしょう。 🙂

アイデアは簡単です〜

1.コンテンツブロックを含むdivブロックを作成する

このdivブロックは、ページ読み込みエフェクトでコンテンツのフェードを実装するために使用されます。

<div id="page__effect" style="display:none;">
<!-- this content is hide, need jQuery to fade in -->
</div>

2. jQueryのフェードイン効果

ドキュメントを表示する準備ができたらjQuery fadeInエフェクトを作成する

$(document).ready(function(){
    $('#page__effect').fadeIn(2000);
});

__P.SfadeIn（）は、関数内のjQueryライブラリビルドです。

デモ

デモを試してください

フェードインロード効果を実装するための完全なjQueryコード。

<html>
<head>
<title>JQuery Page Loading Effect</title>

<script type="text/javascript" src="jquery.js"></script>

</head>

<script type="text/javascript">

$(document).ready(function(){

    $('#page__effect').fadeIn(2000);

});

</script>
<body>

<div id="page__effect" style="display:none;">

<h1>JQuery Page Loading Effect</h1>

    This is page loading effect with JQuery 1<BR>
    This is page loading effect with JQuery 2<BR>
    This is page loading effect with JQuery 3<BR>
    This is page loading effect with JQuery 4<BR>
    This is page loading effect with JQuery 5<BR>
    This is page loading effect with JQuery 6<BR>
    This is page loading effect with JQuery 7<BR>
    This is page loading effect with JQuery 8<BR>
    This is page loading effect with JQuery 9<BR>
    This is page loading effect with JQuery 10<BR>
    This is page loading effect with JQuery 11<BR>
    This is page loading effect with JQuery 12<BR>
    This is page loading effect with JQuery 13<BR>
    This is page loading effect with JQuery 14<BR>
</div>

</body>
</html>

jquery

jqueryエフェクト

getdocs

13036