jQuery之簡單動畫效果

1、 show()顯示動畫

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

         show(speed,[easing],callback)　　umberN/ String　　easing預設是swing(緩動動畫,隨著動畫的開始逐漸變快),可選linear(穩定動畫,每一幀都是相同的速率);

##         $ ("#p1").show(3000,function(){ alert("動畫顯示完成!"); });　

 

#2、hide()隱藏效果

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

#　　　 hide(speed,easing,callback)　　Number/String 參數和show的參數類型及定義是一樣的,可參考show

　　     $(

#　　     $("

　　hide 3000,function(){ alert("動畫隱藏完成") });

# 

3、toggle ()隱藏顯示自動切換，目前為顯示則隱藏，目前為隱藏則顯示

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

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

　　　　　　　function(){ alert("動畫效果切換完成") });

#　　　　　

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

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

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

#"　　Number　p1").slideDown(3000,function(){ alert("向下展開顯示成功!"); });

 

#5、slideUp()向上隱藏,　　hide()是水平與垂直兩個方向的，而slideUp()僅僅是垂直方向向上收起隱藏

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

　　　　 slideUp(speed,[easing],callback)　　　 slideUp(speed,[easing],callback)　　　 slideUp(speed,[easing],callback)[

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

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

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

#　　　　 slideToggle(##　　　　 slideToggle(

##easing],callback) Number/String,String,Function

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

　　　　

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

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

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

　　　　　$("

　　　　　$("

　　,Infunc0( ("淡入顯示成功!"); });

 

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

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

　　　　   f　 f[ easing],callcack)　　   Number/String,String,Function

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

 

#9、fadeToggle() 以改變透明度來切換顯示隱藏狀態

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

　　　　  　oggle(

　　　　 接　oggle(speed,[eaumberd /String,Function

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

 

10、fadeTo() 由指定的時間將透明度改變到指定的透明度

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

　　　　　adeToC([speed],opacity,[easing],[]　　adeToe([speed],opacity,[easing],[]] ,String,Function,opacity指透明度取值是從0-1

　　　　　$("#p1").fadeTo(3000,0.22,function(){ alert("改變成功!"); }); 

#11、animate() 自訂動畫，一般來說數位變動都可以用於動畫。

　　語法：animate(params,speed,easing,callback);　　樣式參數，時間，可選擇，函數

## ##　　　　　$("#p1").animate({ width:300px,height,300px },3000);############　　　　s　##########　　　合　s　樣式參數。注意要採用駱駝法則，如font-size要寫成fontSize。顏色漸層不支援。 ######

backgroundPosition
#borderWidth
borderBottomWidth
#borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
#marginTop
##outlineWidth
padding
paddingBottom
#paddingLeft
paddingRight





#paddingTop
height
width
maxHeight
##maxWidth
#minHeight
maxWidth
font
#fontSize##bottom

left
right

top

letterSpacingwordSpacing

##lineHeight

textIndent

 

##12、stop() 停止正在執行動畫

#########　　 stop([clearQueue],[gotoEnd]);　　兩個參數皆為布林值，第一個表示，是否停止動畫執行、第二個表示，如果停止，是否立即變成執行完成的狀態，如果設定為否，則停留在執行一半的狀態。 ############　　$("#p1").hide(5000)　　//此動畫正在執行#############　　$("#p1"). stop();　　　　//上一行程式碼指定的動畫停止在一半狀態############　　$("#p1").stop(true,true);　　//停止目前動畫，同時動畫切換到完成執行狀態。 ############ ###################13、delay() 延遲執行動畫當一個動畫stop()了之後還能夠用delay ()來延遲執行。從停止位置繼續執行。當然用原來的方法繼續執行也不可，不過沒有延遲效果。 ##################　　delay(duration,[queueName])　　設定一個延遲值來執行動畫###Integer###,String######### ####　　$("#p1").delay(3000).hide(3000);　　//表示在3000毫秒後執行hide(3000);############ #### ###

14、jQuery.fx.off　　//該屬性只是是否關閉目前頁面上的動畫,關閉動畫之後，沒有動畫效果，所有設定了執行時間的動畫會瞬間完成。注意此屬性出現的位置。出現的位置不同影響的範圍也不同。

　　$(function(){

##　　　　jQuery.fx.off = true;　　//屬性在事件外面。 ，對頁面載入後執行的所有動畫有效

　　　　$("#p1").click(function(){　　//屬性如果寫在這裡，僅僅對當前點擊事件無效，不影響其他事件的動畫

　　　　　　$("#p1").hide(3000);　　//注意由於jQuery.fx.off設定為了true,因此3000毫秒失效，相當於hide();

　　　　 });

　　})

 ##　　})

 ##」

15、jQuery.fx.interval　　//此屬性設定動畫的幀速，單位是毫秒，如果設定的時間越小，就越平滑。 ，屬性出現的位置同樣有影響範圍

　　 $(function(){

　　　　jQuery.fx.interval = 1000;

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

　　　　　　　1" (3000);　　　//jQuery.fx.interval設定為1000，也就是1秒鐘，改變一次效果。 ##　　 })

以上就是我對jq一些基本的動畫的簡單理解,在這裡做了一些積累,同時還希望可以幫助到剛剛接觸到jq的同胞們,希望可以對你們起到一定的幫助,有什麼需要補充的我會在隨後的時間裡一一補充進來,同時也希望各位大神有什麼建議也可以積極的提出來.

#

以上是jQuery之簡單動畫效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！