要素の表示、非表示、切り替え、sliding_jqueryを制御するjQueryメソッドのまとめ-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 16:03:37

オリジナル

1670 人が閲覧しました

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()	对被选元素执行自定义动画