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中文網其他相關文章！
