jQuery効果- 非表示と表示

jQueryはさまざまな驚くべき効果を実行するためのシンプルなインターフェースを提供します。

jQuery効果メソッドにより、最も少ない設定で一般的な効果を迅速に実現できます。

jQuery hide()とshow()

您可以使用hide()およびshow()メソッドはHTML要素の非表示と表示を行います。

以下の例では、hide()とshow()メソッドの使用法を示しました：

//　通常表示されている段落を非表示にします
$("#hide-btn").click(function(){
　　$("p").hide();
});
//　非表示の段落を表示します
$("#show-btn").click(function(){
　　$("p").show();
});

これはhide() メソッドの構文：

$(selector).hide(duration,　easing,　callback);

これはshow()メソッドの構文：

$(selector).show(duration,　easing,　callback);

hide()およびshow()メソッドは3つのオプション引数を受け入れます：

• duration -効果が持続どれくらいの時間がかかります。可能な値は「slow」、「fast」またはミリ秒

• easing -トランジションに使用するエイジング機能を指示します。可能な値は「swing」、「linear」です。

• callback-指定されたメソッドが完了した後に呼び出される関数

以下の例では、hide()とshow()を使用してデモンストレーションを行いましたdurationパラメータ：

$("#hide-btn").click(function(){
　　$("p").hide(1000);
});
$("#show-btn").click(function(){
　　$("p").show(1000);
});

以下の例では、hide()とshow()を使用してデモンストレーションを行いましたコールバックパラメータ：

$("#hide-btn").click(function(){
　　$("div").hide(1000,　function(){
　　　　alert("DIVが非表示にされました");
　　});
});
$("#show-btn").click(function(){
　　$("div").show(1000,　function(){
　　　　alert("DIVが表示されました");
　　});
});

アニメーションの全範囲（このサンプルでは単語）を速やかに非表示にします、200ミリ秒以内に各アニメーションを完了します：

$("button").click(function(){
　　$("span:last-child").hide("fast",　function(){
$(this).prev().hide("fast",　arguments.callee);
　　});
});

jQuery toggle()メソッド

さらに、toggle()このメソッドは、HTML要素の隠しと表示の切り替えを行います。

選択された要素が最初に表示されていた場合、それが隠されます；隠れていた場合、それが表示されます。

以下のサンプルでは、ボタンをクリックすると、すべてのhideとshowを<p>要素間の切り替え：

$("button").click(function(){
　　$("p").toggle(1500);
});

toggle()メソッドの文法は以下の通りです：

$(selector).toggle(duration, easing, callback);

toggle()メソッドは3つのオプション引数を受け入れます：

• duration　 -効果が持続何秒か。可能な値は「slow」、「fast」またはミリ秒です。

• easing -トランジションに使用するエイジング機能を指示します。可能な値は「swing」、「linear」です。

• callback-指定されたメソッドが完了した後に呼び出される関数

jQuery効果リファレンス

完全な効果リファレンスについては、私たちのjQuery Effects 参考手帳。