この投稿では、jQuery の Hide() と fadeOut()、show()、fadeIn() の主な違いを強調します。
jQuery の Hide() と fadeOut()、show() と fadeIn() の違いに進む前に、まず次のガイドを読んでこれらのメソッドの基本を確認してください。
- jQueryのfadeIn()メソッド
- jQueryのfadeOut()メソッド
- JavaScript JQuery Hide() メソッド |説明済み
- JQuery Show() メソッド |説明済み
まず、jQuery の Hide() メソッドと fadeOut() メソッドの違いを確認してください。
jQuery の Hide() と fadeOut() の区別
「」の唯一の主な違いは、 隠れる（） ' そして ' フェードアウト（） 」の方法は次のとおりです。
- 時間間隔 ：「」 隠れる（） 」メソッドはデフォルトで、時間間隔を消費せずに要素の不透明度を 100 から 0 に即座に変更することで要素を非表示にします。 フェードアウト（） 」メソッドはフェードアウトします。つまり、デフォルト値である「400ms」で要素を徐々に非表示にします。
前述の違いを実際に実装してみましょう。
まず、次の HTML コードを見てください。
< 中心 >< h2 ID = 「H2」 > Linuxhint へようこそ ！ h2 >
< ボタン > 要素を隠す ボタン >
中心 >
上記のコード行では次のようになります。
- ” <中央> ” タグは、Web ページの中央にある指定された要素の配置を調整します。
- ” 」タグは、ID「H2」を持つレベル 2 の小見出しを作成します。
- ” <ボタン> ”タグは新しいボタンを挿入します。
注記： このガイドでは、上記の HTML コードに従っています。
例: 「デフォルト」値を使用して jQuery の「hide()」メソッドを適用する
この例では、「hide()」をデフォルト値とともに適用して要素を非表示にします。
< 脚本 >$ ( 書類 ） 。 準備ができて ( 関数 ( ） {
$ ( 'ボタン' ） 。 クリック ( 関数 ( ） {
$ ( 「#H2」 ） 。 隠れる ( ） ;
} ） ;
} ） ;
脚本 >
上記のコード行では次のようになります。
- まず、「 準備ができて（） 」メソッドは、現在の HTML ドキュメントがロードされるときに、指定された関数を実行するために適用されます。
- 次に、「 クリック（） 」メソッドは、ボタンのクリック時にリンクされた機能を実行します。
- その後、「 隠れる（） 」メソッドは、アクセスされたIDが「H2」の見出し要素を即座に非表示にします。
出力
ボタンをクリックするとすぐに見出し要素が非表示になることがわかります。
例: jQuery「fadeOut()」メソッドを「Default」値で適用する
この例では、「fadeOut()」メソッドをデフォルト値で使用して、指定された要素を「400ms」で徐々に非表示にします。
このシナリオでは、「button」要素の内容が変更されます。
< ボタン > フェードアウト ( 隠れる 要素 ） ボタン >次に、「fadeOut()」メソッドを次のように実装します。
< 脚本 >$ ( 書類 ） 。 準備ができて ( 関数 ( ） {
$ ( 'ボタン' ） 。 クリック ( 関数 ( ） {
$ ( 「#H2」 ） 。 フェードアウト ( ） ;
} ） ;
} ） ;
脚本 >
このとき、「 フェードアウト（） 」メソッドは、アクセスされた見出し要素を 400ms (デフォルト値) でフェードアウトするために適用されます。
出力
出力は、特定のボタンをクリックすると、デフォルトの時間間隔、つまり「400ms」で見出し要素が徐々に非表示になることを明確に示しています。
jQuery での show() と fadeIn() の区別
「hide()」メソッドと「fadeOut()」メソッドと同様に、「show()」メソッドと「fadeIn()」メソッドの間にも同じ違いがあります。
- 時間間隔 ：「」 見せる（） 」メソッドはデフォルトで、不透明度を 0 から 100 に即座に変更して非表示要素を表示しますが、「 フェードイン（） 」メソッドは、デフォルト値である「400ms」で非表示要素を徐々に表示します。
例: jQuery の「show()」メソッドを「Default」値で適用する
この例では、「show()」をデフォルト値で適用して、非表示の要素を表示します。
まず、提供されている HTML コード ブロックを見てください。
< 中心 >< ボタン > 要素の表示 ボタン >
< h2 ID = 「H2」 スタイル = 「表示：なし」 > Linuxhint へようこそ ！ h2 >
中心 >
このシナリオによれば、指定された見出し要素は「 表示: なし ' 財産。
次に、指定されたコード ブロックに従って、「show()」メソッドの実際の実装を理解します。
< 脚本 >$ ( 書類 ） 。 準備ができて ( 関数 ( ） {
$ ( 'ボタン' ） 。 クリック ( 関数 ( ） {
$ ( 「#H2」 ） 。 見せる ( ） ;
} ） ;
} ） ;
脚本 >
上記のコード ブロックでは、「 見せる（） 」メソッドを使用すると、追加された隠し要素がすぐに表示されます。
出力
ボタンをクリックすると、非表示の見出し要素がすぐに表示されることがわかります。
例: jQuery の「fadeIn()」メソッドを「Default」値で適用する
この例では、デフォルト値「fadeIn()」メソッドを使用した非表示要素を示しています。 400ミリ秒 ”:
ボタン要素のテキストは、指定されたシナリオに従って変更されます。
< ボタン > フェードイン ( 見せる 要素 ) ボタン >ここで、「」を適用します。 フェードイン（） 」メソッドは次のコード ブロックを使用します。
< 脚本 >$ ( 書類 ) 。 準備ができて ( 関数 ( ) {
$ ( 'ボタン' ) 。 クリック ( 関数 ( ) {
$ ( 「#H2」 ) 。 フェードイン ( ) ;
} ) ;
} ) ;
脚本 >
このコード ブロックでは、「 フェードイン（） 」メソッドを使用して、ID「H2」と一致する非表示要素を 400ms (デフォルト値) で表示します。
出力
指定されたボタンをクリックすると、デフォルトの時間間隔、つまり「400ms」で非表示の要素が徐々に表示されることがわかります。
結論
jQuery における唯一の重要な違いは、 隠れる（） そして フェードアウト（） 、 見せる（） 、 そして フェードイン（） 方法は「 時間間隔 ”。 「show()」および「hide()」メソッドはデフォルトで機能を即時に実行しますが、「fadeIn()」および「fadeOut()」メソッドはデフォルトの時間間隔、つまり「400ms」でタスクを実行します。この投稿では、jQuery の Hide() と fadeOut()、show()、fadeIn() の主な違いを実際に説明しました。