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

$("#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) //このアニメーションは実行中です

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() 間隔と同じです。 //このプロパティはアニメーションのフレーム レートを設定します。ミリ秒が小さいほどスムーズになります。 , 属性が出現する位置も範囲に影響します

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