jquery_jquery の動的効果の概要

アニメーション効果を包括的に使用すると、簡単なコードを使用してさまざまな jquery プラグインの効果を簡単に実装することもできます

この記事は、書籍「A Brief Talk on jquery」を参照し、それを整理したものですを、私自身の現実と組み合わせます。 経験に基づいており、学習マニュアルと見なすことができます。
編集時にコードがめちゃくちゃになったので、コード形式はまだ少し汚いかもしれません。
表示、非表示、および組み合わせ (切り替え) 効果
1.show(speed,callback);
説明: このメソッドは非表示の要素を表示でき、パラメーターもデフォルトです。つまり、次の形式で記述されます。 show() の
speed --- 表示速度を指定するパラメータは 3 つあり、遅い、標準、速いを選択するか、数値を自分で指定することもできます (単位: ミリ秒)
callback --- callback function
以下は簡単な例です

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

var callback=function(){ //alert("私はコールバック関数です") ;
}
var f1=function(){
// $("#t1").show( ); パラメータdefault
// $("#t1").show( "fast",callback); 表示速度は高速モードです
$("#t1").show(3000,callback); //カスタマイズされた表示速度 3000 ミリ秒
$("# b1").click(f1);

HTML コード

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

dd

2 hidden(speed,callback);注: 要素を非表示にするために使用される show メソッドとは対照的に、パラメーターは show と同じです。3.1 を参照してください。

次の例は、ボタンをクリックして表示されている div を非表示にする方法です。

コードをコピーします コードは次のとおりです: var callback=function(){ //alert("私がコールバックですfunction");

}

var f1=function(){
// $("#t1").hide() ; パラメータのデフォルト
// $("#t1")。 Hide("fast",callback); 表示速度は高速モードです
$("#t1").hide(3000,callback);/ /カスタム表示速度 3000 ミリ秒
}; ).click(f1);


HTML コード

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

dd

3 toggle(speed,callback)
説明: これは show() メソッドと Hide() メソッドとして理解でき、show() と Hide() を交互に実行します。 🎜>例: ページに非表示の要素があり、最初に toggle() が実行されると要素が表示され、2 回目の実行で要素が非表示になり、3 回目に要素が再度表示されます。 。 。

パラメータは 3.1 と同じです




コードをコピーします

コードは次のとおりです: var callback=function (){ //alert("私はコールバック関数です"); }

var f1=function(){

//$("#t1").toggle( ); // パラメータがありません Save
//$("#t1").toggle("fast",callback); // 高速モードでの表示速度
$("#t1").toggle(3000) ,callback);
$("#b1").click(f1);



HTML コード

コードをコピー

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

2. 要素のスライド効果 (下方向に拡大、縮小)上向き)

1 .slideDown(speed,[callback]);

説明: オブジェクトの高さを変更して、下方向に拡張するアニメーション効果を実現します。一般的に、非表示の要素を表示するために使用されます


コードをコピー

コードは次のとおりです: var callback=function(){ //alert("I am aコールバック関数"); } var f1=function( ){ //$("#t1").slideDown(); // パラメータのデフォルト

//$("#t1")。 slideDown("fast",callback); // 表示速度 高速モードの場合

$("#t1").slideDown(1000,callback);
$("#b1"); click(f1);


HTML コード

コードをコピー

コードは次のとおりです。 >

dd div>

2.slideUp(speed,[callback]););

説明: オブジェクトの高さを変更して、上向きに拡大するアニメーション効果を実現します。一般的に非表示にするために使用されます。表示される要素

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

var callback=function(){
//alert ("私はコールバック関数です");
}
var f1=function(){
//$("#t1").slideUp(); //デフォルトパラメータ// $("#t1").slideUp("fast",callback); //表示速度は高速モード
$("#t1").slideUp(1000,callback); 🎜>};
$("#b1").click(f1);
t1" style="border: 1px ソリッド グレー;">dd

3.slideToggle(speed,[callback]););
説明: これは、上記の 2 つのメソッドを統合したものであると言え、toggle(); を置き換えることができます。上記のメソッドの紹介をよく読んでいれば、それらの使用方法がわかるはずです。実際、これらのメソッドは使い方やパラメータは同じですが、表示形式が異なりますので、例は書きません

。

3 つの要素のフェードインおよびフェードアウト効果

1.fadeIn(speed,[callback]);

説明: 非表示の要素を表示するために使用されるフェードアウト効果を実装します

2.fadeOut(speed,[callback]);

説明: 表示されている要素を非表示にするために使用されるフェードイン効果を実装します

3, fadeTo(speed,opactity,callback);

説明: このメソッドは、表示されている要素

の透明度を変更するために使用されます。 パラメータ:speed、callback は、上で紹介した他のアニメーション メソッドと同じパラメータを持ちます。

opactity パラメータは透明度を表し、値の範囲は 0 ～ 1

コードをコピーします コードは次のとおりです: var callback=function(){

/ /alert("I am Callback function");

};
var f1=function(){ $("#t1").fadeTo(1000,0.3,callback);//0.3 は 30% の透明度です
};
$("#b1").click(f1);
dd

4. カスタム アニメーション

注: 前の 1、2、3 からわかるように、要素の表示には、show、slideDown、fadeIn、および非表示のアニメーション効果の Hide、slideUp、fadeOut が含まれます

、効果のトグル、スライドトグルの組み合わせ、透明効果の変更フェード、必要に応じていくつかのアニメーション効果をカスタマイズすることもできます

カスタム アニメーションの使用方法: animate(params,speed,callback);

パラメータの説明: params --- スタイル属性とその値 (アニメーション属性と最終値として) のセット

speed----先ほど紹介したメソッドのspeed属性と同じ

コールバック --- コールバック関数

注: params のスタイル属性はキャメルケースで記述する必要があります。つまり、margin-left は

よりわずかに小さい必要があります。 以下は例です

コードをコピーします コードは次のとおりです: var callback =function(){

//alert("私はコールバック関数です");

var par={ height: "70%" }; f1=function(){
$("#t1").animate(par,1000,callback)

$("#b1").click(f1);


HTML コード

コードをコピー

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

dd