ホームページ > 記事 > ウェブフロントエンド > jquery_jquery の動的効果の概要
jquery_jquery の動的効果の概要
- WBOYオリジナル
- 2016-05-16 18:13:381003ブラウズ
アニメーション効果を包括的に使用すると、簡単なコードを使用してさまざまな 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);
2 hidden(speed,callback);注: 要素を非表示にするために使用される show メソッドとは対照的に、パラメーターは show と同じです。3.1 を参照してください。
// $("#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 回目に要素が再度表示されます。 。 。
コードをコピーします
//$("#t1").toggle("fast",callback); // 高速モードでの表示速度
$("#t1").toggle(3000) ,callback);
$("#b1").click(f1);
HTML コード
コードをコピー
1 .slideDown(speed,[callback]);
コードをコピー
$("#b1"); click(f1);
HTML コード
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
説明: これは、上記の 2 つのメソッドを統合したものであると言え、toggle(); を置き換えることができます。上記のメソッドの紹介をよく読んでいれば、それらの使用方法がわかるはずです。実際、これらのメソッドは使い方やパラメータは同じですが、表示形式が異なりますので、例は書きません
。
3 つの要素のフェードインおよびフェードアウト効果
1.fadeIn(speed,[callback]);説明: 非表示の要素を表示するために使用されるフェードアウト効果を実装します
2.fadeOut(speed,[callback]);
説明: 表示されている要素を非表示にするために使用されるフェードイン効果を実装します
3, fadeTo(speed,opactity,callback);
説明: このメソッドは、表示されている要素の透明度を変更するために使用されます。 パラメータ:speed、callback は、上で紹介した他のアニメーション メソッドと同じパラメータを持ちます。
opactity パラメータは透明度を表し、値の範囲は 0 ～ 1
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 は
よりわずかに小さい必要があります。 以下は例です
$("#t1").animate(par,1000,callback)
$("#b1").click(f1);
HTML コード