本文實例講述了jQuery動畫效果相關方法。分享給大家參考,具體如下:
1、show()顯示效果
語法:show(speed,callback) Number/String,Function speend為動畫執行時間,單位為毫秒。也可以為slow","normal","fast" callback可選,為當動畫完成時執行的函數。
show(speed,[easing],callback) Number/String easing預設是swing,可選linear;
2、hide()隱藏效果
語法:hide(speed,callback) Number/String,Function
hide(speed,easing,callback) Number/String
語法:toggle(speed,callback) Number/String,Function
toggle(speed,callback) Number/String,String,Function
4、slideDown()向下顯示,slow()是水平與垂直方向同時展開,而slideDown是僅在垂直方向向下展開
語法:slideDown(speed,callback) Number/String,Function
slideDown(speed,[easing],callback) Number/String,Function
語法:slideUp(speed,callback) Number/String,Function
slideUp(speed,[easing],callback) Number/String,String,Function
語法:slideToggle(speed,callback) Number/String,Function
slideToggle(speed,[easing],callback) Number/String,String,Function
7、fadeIn() 以改變透明度來顯示
語法:fadeIn(speed,callback) Number/String,Function
fadeIn(speed,[easing],callback) Number/String,Function
文法:fadeOut(speed,callback) Number/String,Function
fadeOut(speed,[easing],callcack) Number/String,String,Function
構文: fadeToggle(speed,callback) 数値/文字列,関数
fadeToggle(speed,[イージング],callback) 数値/文字列,関数
構文: fadeTo(speed,callback) 数値/文字列,関数
fadeTo([スピード],不透明度,[イージング],[fn]) 数値/文字列,浮動小数点数,文字列,関数
構文: animate(params,speed,easing,callback); スタイルパラメータ、時間、オプション、関数
パラメータは角括弧で囲む必要があり、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
$(function(){ jQuery.fx.off = true; //属性在事件外面,对页面加载后执行的所有动画有效 $("#div1").click(function(){ //属性如果写在这里,仅仅对当前点击事件无效,不影响其他事件的动画 $("#div1").hide(3000); //注意由于jQuery.fx.off设置为了true,因此3000毫秒失效,相当于hide(); }); })
に影響します。
$(function(){ jQuery.fx.interval = 1000; $("#div1").click(function(){ $("#div1").hide(3000); //jQuery.fx.interval设置为1000,也就是1秒钟,改变一次效果。 }); })