jQuery動畫效果相關方法實例分析_jquery

本文實例講述了jQuery動畫效果相關方法。分享給大家參考，具體如下：

1、show()顯示效果

語法：show(speed,callback)  Number/String,Function speend為動畫執行時間，單位為毫秒。也可以為slow","normal","fast" callback可選,為當動畫完成時執行的函數。

show(speed,[easing],callback)  Number/String  easing預設是swing,可選linear;

複製程式碼 程式碼如下:

$("#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)  Number/String,Function

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

複製程式碼 程式碼如下:

$("#div1").toggle(3000,function() { alert("動畫效果切換完成") });

4、slideDown()向下顯示，slow()是水平與垂直方向同時展開，而slideDown是僅在垂直方向向下展開

語法:slideDown(speed,callback)  Number/String,Function

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

複製程式碼 程式碼如下:

$("#div1").slideDown(3000,function(3000,function(3000,function(3000,function(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(3000,function() { alert("向上收起隱藏成功!"); })

6、slideToggle垂直方向上切換,toggle是水平與垂直兩個方向上的，而slideToggle是僅僅垂直方向的。

語法:slideToggle(speed,callback)  Number/String,Function

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

複製程式碼 程式碼如下:

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

7、fadeIn() 以改變透明度來顯示

語法：fadeIn(speed,callback)    Number/String,Function

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

複製程式碼 程式碼如下:

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

8、fadeOut() 以改變透明度來隱藏

文法：fadeOut(speed,callback)     Number/String,Function

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

複製程式碼 程式碼如下:

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

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

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

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

コードをコピーします コードは次のとおりです:

$("#div1").fadeToggle(3000, function() {alert("フェードインとフェードアウトが成功しました!");

10. fadeTo() は指定された時間に指定された透明度に変更します

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

fadeTo([スピード],不透明度,[イージング],[fn]) 数値/文字列,浮動小数点数,文字列,関数

コードをコピーします コードは次のとおりです:

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

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

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

コードをコピー コードは次のとおりです:

$("#div1").animate({ width:300px,高さ,300px },3000);

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

背景位置
境界幅
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
マージン
marginBottom
marginLeft
マージン右
marginTop
アウトライン幅
パディング
パディング下
パディング左
右パディング
パディングトップ
身長
幅
maxHeight
maxWidth
最小身長
maxWidth
フォント
フォントサイズ
下
左
そうです
トップ
文字間隔
wordSpacing
線の高さ
textIndent

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

stop([clearQueue],[gotoEnd]); 両方のパラメータはブール値で、最初のパラメータはアニメーションの実行を停止するかどうかを示し、2 番目のパラメータは停止した場合にすぐに完了状態に移行するかどうかを示します。半分実行された状態に留まる場合は No に設定します。

$("#div1").hide(5000) //此动画正在执行
$("#div1").stop();  //上一行代码指定的动画停止在一半状态
$("#div1").stop(true,true); //停止当前动画，同时动画切换到完成执行状态。

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

lay(duration,[queueName]) アニメーションを実行するための遅延値を設定します Integer,String

コードをコピー コードは次のとおりです:

$("#div1").delay(3000) .hide( 3000); // Hide(3000) が 3000 ミリ秒後に実行されることを示します。

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

$(function(){
  jQuery.fx.off = true; //属性在事件外面，对页面加载后执行的所有动画有效
  $("#div1").click(function(){ //属性如果写在这里，仅仅对当前点击事件无效，不影响其他事件的动画
   $("#div1").hide(3000); //注意由于jQuery.fx.off设置为了true,因此3000毫秒失效，相当于hide();
   });
})

15. jQuery.fx.interval //このプロパティは、アニメーションのフレーム レートをミリ秒単位で設定します。時間が小さいほど、スムーズになります。 、属性が表示される位置も範囲

に影響します。

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

この記事が jQuery プログラミングのすべての人に役立つことを願っています。