jQueryアニメーションエフェクトコレクション

以下にアニメーション効果のいくつかのメソッドを紹介します:

1. show() 表示効果

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

show(speed,[イージング],callback) 数値/文字列 デフォルトのイージングは​​スイングです。オプションです。線形;

$("#div1").show(3000,function(){ alert("动画显示完成!"); });　　

2. Hide() 効果を隠す

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

Hide(speed, easing, callback) Number/String

$("#div1").hide(3000,function(){ alert("动画隐藏完成") });

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

構文: toggle(speed,callback) 数値/文字列,関数

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

$("#div1").toggle(3000,function(){ alert("动画效果切换完成") });

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

構文：slideDown(speed, callback ) 数値/文字列,関数

slideDown(speed,[イージング],callback) 数値/文字列,関数

$("#div1").slideDown(3000,function(){ alert("向下展开显示成功!"); });

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

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

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

$("#div1").slideUp(3000,function(){ alert("向上收起隐藏成功!"); })

6. slideToggleは縦方向と横方向の両方に切り替えますが、slideToggleは縦方向のみです

構文：slideToggle(speed,callback) 数値/文字列,関数。

slideToggle(speed , [easing], callback) Number/String, String, Function Speed, [easing], callback) Number/String, Function ,[easing],callcack) Number/String,String,Function

$("#div1").slideToggle(3000,function(){ alert("水平方向上切换成功"); });

9. fadeToggle()は透明度を変更して表示と非表示を切り替えます

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

Number /String,Function

fadeTo([speed],opacity,[ easing],[fn]) Number/String,Float,String,Function

$("#div1").FadeIn(3000,function(){ alert("淡入显示成功!"); });

11. animate() カスタム アニメーション、一般的に言えば、デジタル変更をアニメーションに使用できます。

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

$("#div1").fadeOut(3000,function(){ alert("淡出隐藏成功!"); });

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

BorderWidth

borderbottomwidth

borderLEFTWIDTH

Borderri Right

margintop、OutLineWidth

padding

PaddingBottom

paddingLeft

padd TH

font

fontSize

bottom

left

right

top

letterSpa cing

wordSpacing

lineHeight

textIndent

12. stop()実行中のアニメーションを停止します

stop([clearQueue],[gotoEnd]); 両方のパラメータはブール値で、最初のパラメータはアニメーションの実行を停止するかどうかを示し、2 番目のパラメータはすぐに完了に変更するかどうかを示します。 「いいえ」に設定すると、実行途中の状態になります。

$("#div1").fadeToggle(3000,function(){ alert("淡入淡出切换成功!"); });

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

$("#div1").fadeTo(3000,0.22,function(){ alert("透明度改变成功!"); });

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

15、jQuery.fx.interval　　//该属性设置动画的帧速，单位是毫秒，如果设置的时间越小，就越平滑。，属性出现的位置同样有影响范围　

$(function(){
 
　　jQuery.fx.interval = 1000;
 
　　$("#div1").click(function(){　　
 
　　　　$("#div1").hide(3000);　　　//jQuery.fx.interval设置为1000，也就是1秒钟，改变一次效果。　
 
　　 });
 
 })