jquery動畫效果

2021-10-05 18:26:58 字數 2244 閱讀 2440

1.基本

show()顯示效果

$(document).ready(function());

});hide()隱藏效果

$(document).ready(function());

});toggle()隱藏顯示自動切換,當目前為顯示則隱藏,當目前為隱藏則顯示

$(document).ready(function());

});hello

ppdp

div

dpdp1 sp

dp2fuzhi

2.滑動

slidedown()向下顯示,slow()是水平與垂直方向同時展開,而slidedown是僅僅在垂直方向向下展開

$(document).ready(function());

});slideup()向上隱藏,hide()是水平與垂直兩個方向的,而slideup()僅僅是垂直方向向上收起隱藏

$(document).ready(function());

});slidetoggle垂直方向上切換,toggle是水平與垂直兩個方向上的,而slidetoggle是僅僅垂直方向的。

$(document).ready(function());

});hello

ppdp

div

dpdp1 sp

dp2fuzhi

3.淡入淡出

fadein() 以改變透明度來顯示

$(document).ready(function());

});fadeout() 以改變透明度來隱藏

$(document).ready(function());

});fadetoggle() 以改變透明度來切換顯示隱藏狀態

$(document).ready(function());

});fadeto() 由指定的時間將透明度改變到指定的透明度

用600毫秒緩慢的將段落的透明度調整到0.66,大約2/3的可見度:

$(document).ready(function());

});hello

ppdp

div

dpdp1 sp

dp2fuzhi

4.自定義

animate() 自定義動畫,一般來說數字變動都可以用於動畫。

語法:animate(params,speed,easing,callback);  樣式引數,時間,可選擇,函式。其中params要用中括號括起來,可以使用的css樣式引數。注意要採用駱駝法則,如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,letterspacing,wordspacing,lineheight,textindent

用500毫秒將one移到left為50的地方並且完全清晰顯示出來(透明度為1):

$(document).ready(function(),500 )

});});

在600毫秒內切換段落的高度和透明度:

$(document).ready(function(), "slow");

});});

stop()停止正在執行動畫

stop([clearqueue],[gotoend]);兩個引數均為布林值,第乙個表示,是否停止動畫執行、第二個表示,如果停止,是否立即變為執行完成的狀態,如果設定為否,則停留在執行一半的狀態。

$(document).ready(function());

});delay() 延遲執行動畫  當乙個動畫stop()了之後還能夠用delay()來延遲執行。從停止位置繼續執行。

$("button").click(function());

});在.slideup() 和 .fadein()之間延時3000毫秒:

$(document).ready(function());

});hello

ppdp

fuzhi

jquery 動畫效果

首先,在做jquery 動畫效果之前,必須先知道jquery動畫效果的實現順序。jquery中,會把所有的動畫效果 如hide,show等 放入乙個佇列中 預設為 fx 然後依照先進先出的原則執行佇列中的動畫效果。其他的非動畫效果,都不會放入佇列中。並且jquery 會優先執行這些非動畫效果,然後再...

JQuery動畫效果

show 顯示隱藏的匹配元素 hide 隱藏顯示的元素 slideup 滑走 元素不能復原 slidetoggle 滑走 元素可以復原 感覺今天寫的並沒有什麼卵用 因為這是動的啊!但是看在iphone更新的情況下 就寫一下吧 fadein 通過不透明度的變化來實現所有匹配元素的淡入效果注意 不會 影...

jQuery 效果 動畫

jquery animate 方法允許您建立自定義的動畫。開始動畫 jquery jquery animate 方法用於建立自定義動畫。selector animate speed,callback 必需的 params 引數定義形成動畫的 css 屬性。可選的 speed 引數規定效果的時長。它可...