jquery_jquery の動的効果の概要
リリース： 2016-05-16 18:13:38
アニメーション効果を包括的に使用すると、簡単なコードを使用してさまざまな 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 コード
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 コード
コードをコピー
2. 要素のスライド効果 (下方向に拡大、縮小)上向き)
1 .slideDown(speed,[callback]);
説明: オブジェクトの高さを変更して、下方向に拡張するアニメーション効果を実現します。一般的に、非表示の要素を表示するために使用されます
コードをコピー
//$("#t1")。 slideDown("fast",callback); // 表示速度 高速モードの場合
$("#t1").slideDown(1000,callback);
$("#b1"); click(f1);
HTML コード
コードをコピー
コードは次のとおりです。 >
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
/ /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 は
よりわずかに小さい必要があります。
以下は例です
//alert("私はコールバック関数です"); var par={ height: "70%" }; f1=function(){
$("#t1").animate(par,1000,callback)
$("#b1").click(f1);
HTML コード
コードをコピー
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
