ホームページ  >  記事  >  ウェブフロントエンド  >  jquery_jquery の動的効果の概要

jquery_jquery の動的効果の概要

WBOY
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);

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 コード



コードをコピー
コードは次のとおりです: 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

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事:Jquery に基づくテーブルの代替行の色変更、モバイルの色変更、クリック色の変更 plug-in_jquery次の記事:Jquery に基づくテーブルの代替行の色変更、モバイルの色変更、クリック色の変更 plug-in_jquery

関連記事

続きを見る