要素の表示、非表示、切り替え、sliding_jqueryを制御するjQueryメソッドのまとめ

jQuery の非表示と表示

2 つの関数 Hide() と show() を通じて、jQuery は HTML 要素の表示と非表示をサポートします。
例

コードをコピー コードは次のとおりです:

$("#隠す").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});

Hide() と show() はどちらも、speed と callback という 2 つのオプションのパラメータを設定できます。
構文:

コードをコピー コードは次のとおりです:

$(セレクター).非表示(速度,コールバック)

$(セレクター).show(速度,コールバック)

速度パラメータは、表示または非表示にする速度を指定します。これらの値は、「遅い」、「速い」、「通常」、またはミリ秒に設定できます。
コールバック パラメータは、表示または非表示関数の完了後に実行される関数の名前です。コールバック パラメーターについては、このチュートリアルで後ほど詳しく説明します。
例

コードをコピー コードは次のとおりです:

$("ボタン").click(function(){
$("p").hide(1000);
});

コールバック パラメータは、この関数の完了後に実行される関数の名前です。コールバック パラメーターについては、このチュートリアルで後ほど詳しく説明します。

jQuery スライディング関数 - slideDown、slideUp、slideToggle

jQuery には次のスライディング関数があります:

コードをコピー コードは次のとおりです:

$(セレクター).slideDown(速度,コールバック)
$(セレクター).slideUp(速度,コールバック)
$(セレクター).slideToggle(速度,コールバック)

速度パラメータでは、「遅い」、「速い」、「標準」、またはミリ秒の値を設定できます。
コールバック パラメータは、この関数の完了後に実行される関数の名前です。コールバック パラメーターについては、このチュートリアルで後ほど詳しく説明します。
slideDown() インスタンス

コードをコピー コードは次のとおりです:

$(".flip").click(function(){
$(".panel").slideDown();
});

jQuery フェード関数 - fadeIn()、fadeOut()、fadeTo()
jQuery には次のフェード機能があります:

コードをコピー コードは次のとおりです:

$(セレクター).fadeIn(スピード,コールバック)

$(セレクター).fadeOut(速度,コールバック)

$(セレクター).fadeTo(速度、不透明度、コールバック)

速度パラメータでは、「遅い」、「速い」、「標準」、またはミリ秒の値を設定できます。
fadeTo() 関数の不透明度パラメータは、指定された不透明度へのフェードを指定します。
コールバック パラメータは、この関数の完了後に実行される関数の名前です。コールバック パラメーターについては、このチュートリアルで後ほど詳しく説明します。

jQuery カスタム アニメーション

jQuery 関数を使用してカスタム アニメーションを作成するための構文:

コードをコピー コードは次のとおりです:

$(selector).animate({params},[duration],[easing],[callback])

重要なパラメータはparamsです。アニメーション化する CSS プロパティを定義します。このようなプロパティは複数同時に設定できます:

コードをコピー コードは次のとおりです:

animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

2 番目のパラメータは期間です。アニメーションに適用するのに使用される時間を定義します。設定する値は、「遅い」、「速い」、「通常」、またはミリ秒です。
例

コードをコピー コードは次のとおりです:

<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({高さ:300},"遅い");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});

函数	描述
$(selector).hide()	隐藏被选元素
$(selector).show()	显示被选元素
$(selector).toggle()	切换（在隐藏与显示之间）被选元素
$(selector).slideDown()	向下滑动（显示）被选元素
$(selector).slideUp()	向上滑动（隐藏）被选元素
$(selector).slideToggle()	对被选元素切换向上滑动和向下滑动
$(selector).fadeIn()	淡入被选元素
$(selector).fadeOut()	淡出被选元素
$(selector).fadeTo()	把被选元素淡出为给定的不透明度
$(selector).animate()	对被选元素执行自定义动画