jQueryフレームワークは、要素の表示と非表示の3つのアニメーションメソッドを実装しています。

以前、友人たちに、jQuery フレームワークを使用して HTML 内の要素の属性を操作できることを伝えました。そのため、上記に表示および非表示になっているのは画像ではなく、単なる div です。ここでは、要素の属性を操作して、要素を表示または非表示にする方法を説明します。

jQuery フレームワークで要素オブジェクトを表示および非表示にする方法には、「デフォルトで表示および非表示」、「スライドして表示および非表示」、「フェードインおよびフェードアウトして表示および非表示」の 3 つがあります。次に、これら3つの方法をそれぞれ紹介します。

1. デフォルトで表示と非表示を切り替える

デフォルトでは要素を表示する方法は

show([速度,[イージング],[fn]])

パラメータの意味は次のとおりです。

speed: アニメーションの速度。 3 つの定義済み値（「遅い」、「通常」、「速い」）のいずれか、またはアニメーションの継続時間を表すミリ秒単位の数値（例: 1000）
easing: 遷移効果を指定するために使用します。デフォルトは「swing」、使用可能なパラメータは「linear」です。 * スイング: アニメーションは最初はゆっくり、途中で速く、最後に再びゆっくりになります。 * 線形: アニメーションは一定の速度で実行されます
fn: アニメーションが完了したときに各要素に対して 1 回実行される関数。

同時に、ここで注意すべき点の 1 つは、上記の 3 つのパラメータはオプションであるということです。設定しない場合は、デフォルト値で実行されます。

次のサンプルコード:

// div を表示する
 $("#showDiv").show("slow","swing");
 直線定速

要素を非表示にするデフォルトの方法は

非表示([速度,[緩和],[fn]])

パラメータの意味は show メソッドの場合と同じです。同じ 3 つのパラメータはオプションです。設定されていない場合は、デフォルト値で実行されます。ここで、「Hidden...」ウィンドウをポップアップする最終実行関数を追加します。

次のサンプルコード:

//divを非表示にする
$("#showDiv").hide("slow","swing",function () {
    アラート("非表示...")
});

では、要素を表示するためのメソッドと要素を非表示するための別のメソッドを毎回定義する必要があるのでしょうか?そうではありません。jQuery はこれを十分に考慮しているので、表示と非表示の両方を実行できるメソッドがあります。

トグル([速度],[イージング],[fn])

このメソッドが呼び出されると、hide() メソッドと同様に要素が非表示になります。再度呼び出されると、show() メソッドと同様に要素が再度表示されます。パラメータの意味は上記と同じです

サンプルコードは次のとおりです。

//表示または非表示にできます$("#showDiv").toggle("slow","linear");

デフォルトで達成される効果は以下のとおりです。

2. スライドして表示と非表示を切り替える

名前からわかるように、スライディングモードとデフォルトモードの違いは、実際には表示と非表示の際のアニメーションの違いです。次に、スライディングモードで要素を表示、非表示、および表示と非表示の両方を行う方法を紹介します。

スライドモードで表示

slideDown([速度],[イージング],[fn])

コード例:

//スライドしてdivを表示
$("#showDiv").slideDown("遅い");

スライドして隠す

slideUp([速度,[イージング],[fn]])

コード例:

// スライドして div を非表示にする
$("#showDiv").slideUp("フェッチ");

スライドモードで表示と非表示を切り替える:

slideToggle([速度],[イージング],[fn])

コード例:

// スライドして表示または非表示にします $("#showDiv").slideToggle("slow");

スライディングモードで達成される効果は以下のとおりです。

3. フェードインとフェードアウトで表示と非表示を切り替える

フェードインおよびフェードアウトモードでの要素の表示と非表示は、実際には上記の 2 つの方法と同じですが、違いは表示効果のみです。

フェードインおよびフェードアウトモードで使用される方法は次のとおりです。

フェードイン([速度],[イージング],[fn])

実装コード:

// フェードアウト div
$("#showDiv").fadeIn("遅い")

フェードインとフェードアウトモードで非表示にする

フェードアウト([速度],[イージング],[fn])

実装コード:

// 非表示の div をフェードアウトする
$("#showDiv").fadeOut("フェッチ");

フェードインとフェードアウトモードで表示と非表示を切り替える

fadeToggle([speed,[easing],[fn]])

実装コード:

// フェードインとフェードアウトでdivを表示したり非表示にしたりします
$("#showDiv").fadeToggle("フェッチ")

フェードインおよびフェードアウトモードで実行した場合の効果は次のとおりです。

上記は、jQuery フレームワークを使用して要素を表示および非表示にする方法です。上記の例の完全な実装コードは次のとおりです。

<!DOCTYPE html>
<html>
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>デフォルトの表示と非表示のアニメーション</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    
    <スクリプト>
        関数hideFn() {
            //divを非表示にする
            /*$("#showDiv").hide("slow","swing",function () {
                アラート("非表示...")
            });*/

            // スライドして div を非表示にする
            $("#showDiv").slideUp("フェッチ");

            // 非表示の div をフェードアウトする
            // $("#showDiv").fadeOut("fetch");

        }
        
        関数 showFn() {
            // div を表示する
            // $("#showDiv").show("slow","swing");
            // 線形均一速度 // スライドして div を表示
            // $("#showDiv").slideDown("遅い");

            // フェードアウト div
            $("#showDiv").fadeIn("遅い")
        }
        
        関数toggleFn() {
            //表示または非表示にできます// $("#showDiv").toggle("slow","linear");

            // スライドして表示または非表示にします // $("#showDiv").slideToggle("slow");

            // フェードインとフェードアウトでdivを表示したり非表示にしたりします
            $("#showDiv").fadeToggle("フェッチ")
        }
        
    </スクリプト>
    
</head>
<本文>
<input type="button" value="div を非表示にするにはボタンをクリックしてください" onclick="hideFn()">
<input type="button" value="div を表示するにはボタンをクリックしてください" onclick="showFn()">
<input type="button" value="ボタンをクリックしてdivの表示と非表示を切り替えます" onclick="toggleFn()">

<div id="showDiv" style="幅:300px;高さ:300px;背景:ピンク">
    div の表示と非表示
</本文>
</html>

IV. 事例: 広告の自動表示と非表示

jQuery フレームワークで要素を表示および非表示にする方法がわかったので、実際のケースに適用してみましょう。次の例では、このテクノロジの実践をさらに強化するために、広告を自動的に表示および非表示にする方法を示します。

私たちが実現したいのは、単純なウェブページで、ページを開いてから 3 秒後に広告画像が表示され、5 秒後に広告が非表示になることです。ここで、広告画像の表示と非表示の操作は、上記の説明に従って簡単に実装できます。では、遅延表示と遅延非表示をどのように実装すればよいでしょうか。

ここでは、js でタイマー setTimeout (method, time) を使用する必要があります。

このメソッドの最初のパラメータは、画像を表示または非表示にするメソッドなどのメソッド名であり、2 番目のパラメータは、ページが読み込まれてから何秒後にメソッドが実行されるかを示すミリ秒数です。

そして、この考え方に従えば、jQuery のエントリ関数に、ページが読み込まれてから 3000 ミリ秒後、つまり 3 秒後に画像を表示するメソッドが呼び出され、ページが読み込まれてから 8000 ミリ秒後、つまり 8 秒後に画像を非表示にするメソッドが呼び出され、その間の残りの 5 秒が画像を表示する時間となるように記述することができます。

上記の要件の実装について説明します。完全なコードは次のとおりです。

<!DOCTYPE html>
<html>
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>広告の自動表示と非表示</title>
    <スタイル>
        #コンテンツ{幅:100%;高さ:500px;背景:#999}
    </スタイル>

    <!--jQuery の紹介-->
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <スクリプト>
        // 画像の表示と非表示を遅らせる手順 // 1. ページが読み込まれた後、タイマーの setTimeout() メソッドを呼び出す // 2. タイマーで広告の表示と非表示の関数を呼び出す // 3. show メソッドと hide メソッドを使用して画像の表示と非表示を切り替える // エントリ関数を設定する $(function () {
            // 3 秒後に画像を表示します setTimeout(adShow,3000);
            // 6秒後に画像を非表示にします setTimeout(adHide,8000);
        });
        // 画像を表示する function adShow() {
            $("#ad").show("遅い");
        }

        //画像を非表示にする function adHide() {
            $("#ad").hide("高速");
        }

    </スクリプト>
</head>
<本文>
<!-- 全体の DIV -->
<div>
    <!-- 広告 DIV -->
    <div id="広告" style="表示: なし;">
        <img スタイル="width:100%" src="../img/adv.jpg" />
    </div>

    <!-- 以下は本文 -->
    <div id="コンテンツ">
        体の部分</div>
</div>
</本文>
</html>

効果は以下のとおりです。