jQueryのシンプルなアニメーション効果

1. show() はアニメーションを表示します

構文: show(speed,callback) 数値/文字列、関数の実行時間はミリ秒単位のアニメーションの実行時間です。また、「遅い」、「通常」、「速い」コールバックもオプションであり、アニメーションの完了時に実行される関数です。

show(speed,[イージング],callback) 数値/文字列 デフォルトのイージングスイング（アニメーションを緩和し、アニメーションが始まると徐々に速くなります）、オプションの線形（すべてのフレームが同じレート）（安定したアニメーション）が表示されます!"); }); Hide(speed,easing,callback) 数値/文字列パラメータはshowのパラメータの型と定義と同じです。show

$("#p1")を参照できます。 Hide(3000, function(){alert("animation Hide completed") });

3. toggle() が現在表示されている場合は、非表示と表示が自動的に切り替わります。現在非表示になっている場合は表示されます

構文：toggle(speed, callback) Number/String, Function

toggle(speed, callback) Number/String, String, Function

効果切り替え完了") });

4. slideDown()は下方向に表示、slow()は水平方向と垂直方向に同時に拡張しますが、slideDownは垂直方向の下方向にのみ拡張します

構文: slideDown(speed,callback) Number/String,Function

3000, function(){alert("下向き表示に成功しました!") });

5 . slideUp() は上方向に非表示にし、hide() は水平方向と垂直方向の両方に、slideUp() は垂直方向に上方向に非表示にするだけです

構文: slideUp(speed,callback) Number/String, Function

slideUp(speed,[easing],callback) Number/String, String,Function

$("#p1").slideUp(3000,function(){alert("上向き非表示成功!"); })

6. slideToggle は垂直方向に切り替えます。Toggle は水平方向と垂直方向の両方にありますが、slideToggle は垂直方向のみです。

構文: slideToggle(speed,callback) Number/String,Function .slideToggle(3000, function(){alert("水平切り替え成功"); });

7. fadeIn()で表示する透明度を変更します

文法：fadeIn(speed,callback) 数値/文字列,関数

fadeIn(speed,[easing],callback) Number/String,Function

$("#p1").FadeIn(3000,function(){alert("フェードイン成功!"); });

8. fadeOut()で透明度を非表示に変更

構文: fadeOut(speed,callback) Number/String, Function

fadeOut(speed,[easing ] ,callcack) Number/String,String,Function

$("#p1").fadeOut(3000,function(){alert("フェードアウトして非表示に成功しました!"); });

9. fadeToggle() は、表示状態と非表示状態を切り替えるために透明度を変更します

構文: fadeToggle(speed,callback) Number/String,Function

fadeToggle(speed,[easing ],callback) Number /String,Function

$("#p1").fadeToggle(3000,function(){alert("フェード切り替え成功!"); });

10, fadeTo() 指定した時間までに指定した透明度に変更

構文：fadeTo(speed,callback) Number/String, Function

fadeTo([speed],opacity,[easing] ,[fn] ) 数値/文字列、浮動小数点、文字列、関数、不透明度は透明度の値が0～1であることを意味します

$("#p1").fadeTo(3000,0.22,function(){alert( "透明度が正常に変更されました! ") });

11. animate() 一般に、アニメーションにはデジタル変更を使用できます。

構文: animate(params,speed,easing,callback); スタイルパラメータ、時間、オプション、関数

$("#p1").animate({ width:300px,height,300px } ,3000);

ここで、params は角括弧で囲む必要があり、CSS スタイルのパラメーターを使用できます。キャメルの法則を使用する必要があることに注意してください。たとえば、font-size は fontSize と記述する必要があります。カラーグラデーションはサポートされていません。

背景位置
ボーダー幅
ボーダー下幅
ボーダー左幅
ボーダー右幅
ボーダー上幅
borderSpacing
margin
margin下
marginLeft
marginRight
余白上部
高さ幅
maxHeight
maxWidth
minHeight
maxWidth
font
fontSize
下
左
右
top
letterSpacing
wordSpacing
lineHeight
textIndent


12

Stop([clearQueue], [gotoEnd]); 両方のパラメータはブール値で、最初のパラメータはアニメーションの実行を停止するかどうかを示します。停止した場合は、すぐに実行完了の状態に変更されます。半分執行された状態。
$("#p1").hide(5000) //このアニメーションは実行中です

$("#p1").stop() //前のコード行で指定されたアニメーション半分の状態で停止します

$("#p1").stop(true,true); //現在のアニメーションを停止し、完了した実行状態に切り替えます。

13. late() アニメーションの実行を遅らせる アニメーションが停止したとき()、遅延()を使用して実行を遅らせることもできます。実行は中断したところから続行されます。もちろん、元の方法で実行を継続することはできませんが、遅延の影響はありません。 // Hide(3000) が 3000 ミリ秒後に実行されることを示します;

14, jQuery.fx.off //このプロパティは、現在のページのアニメーションをオフにするかどうかだけを示します。アニメーションをオフにした後は、アニメーション効果はなくなり、実行時間が設定されたすべてのアニメーションがオフになります。瞬時に完了しました。この属性がどこに表示されるかに注意してください。場所が異なれば効果も異なります。

$(function(){

jQuery.fx.off = true; //属性はイベントの外にあり、ページがロードされた後に実行されるすべてのアニメーションに対して有効です

$( "#p1" ).click(function(){ //ここに属性を書いた場合、現在のクリックイベントに対してのみ無効となり、他のイベントのアニメーションには影響しません

$("#p1" ).hide(3000); //jQuery.fx.off が true に設定されているため、有効期限が 3000 ミリ秒に達することに注意してください。これは Hide() 間隔と同じです。 //このプロパティはアニメーションのフレーム レートを設定します。ミリ秒が小さいほどスムーズになります。 , 属性が出現する位置も範囲に影響します

$(function(){

jQuery.fx.interval = 1000;

$("#p1").click(function) () {

$("#p1").hide(3000); //jQuery.fx.intervalを1秒の1000に設定し、エフェクトを1回変更します。 });

})

上記は、jq の基本的なアニメーションについての私の簡単な理解ですが、同時に、jq に触れたばかりの同胞にとっても役立つことを願っています。追加する必要がある場合は、順次追加していきます。また、ご提案があれば、積極的に投稿していただければ幸いです。彼らは前進します。

以上がjQueryのシンプルなアニメーション効果の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。