jQuery之動(dòng)畫效果大全
下面介紹了幾種動(dòng)畫效果的方法,具體如下:
1、show()顯示效果
語法:show(speed,callback) Number/String,Function speend為動(dòng)畫執(zhí)行時(shí)間,單位為毫秒。也可以為slow","normal","fast" callback可選,為當(dāng)動(dòng)畫完成時(shí)執(zhí)行的函數(shù)。
show(speed,[easing],callback) Number/String easing默認(rèn)是swing,可選linear;
$("#div1").show(3000,function(){ alert("動(dòng)畫顯示完成!"); });
2、hide()隱藏效果
語法:hide(speed,callback) Number/String,Function
hide(speed,easing,callback) Number/String
$("#div1").hide(3000,function(){ alert("動(dòng)畫隱藏完成") });
3、toggle()隱藏顯示自動(dòng)切換,當(dāng)目前為顯示則隱藏,當(dāng)目前為隱藏則顯示
語法:toggle(speed,callback) Number/String,Function
toggle(speed,callback) Number/String,String,Function
$("#div1").toggle(3000,function(){ alert("動(dòng)畫效果切換完成") });
4、slideDown()向下顯示,slow()是水平與垂直方向同時(shí)展開,而slideDown是僅僅在垂直方向向下展開
語法:slideDown(speed,callback) Number/String,Function
slideDown(speed,[easing],callback) Number/String,Function
$("#div1").slideDown(3000,function(){ alert("向下展開顯示成功!"); });
5、slideUp()向上隱藏, hide()是水平與垂直兩個(gè)方向的,而slideUp()僅僅是垂直方向向上收起隱藏
語法:slideUp(speed,callback) Number/String,Function
slideUp(speed,[easing],callback) Number/String,String,Function
$("#div1").slideUp(3000,function(){ alert("向上收起隱藏成功!"); })
6、slideToggle垂直方向上切換,toggle是水平與垂直兩個(gè)方向上的,而slideToggle是僅僅垂直方向的。
語法:slideToggle(speed,callback) Number/String,Function
slideToggle(speed,[easing],callback) Number/String,String,Function
$("#div1").slideToggle(3000,function(){ alert("水平方向上切換成功"); });
7、fadeIn() 以改變透明度來顯示
語法:fadeIn(speed,callback) Number/String,Function
fadeIn(speed,[easing],callback) Number/String,Function
$("#div1").FadeIn(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() 以改變透明度來切換顯示隱藏狀態(tài)
語法: fadeToggle(speed,callback) Number/String,Function
fadeToggle(speed,[easing],callback) Number/String,Function
$("#div1").fadeToggle(3000,function(){ alert("淡入淡出切換成功!"); });
10、fadeTo() 由指定的時(shí)間將透明度改變到指定的透明度
語法:fadeTo(speed,callback) Number/String,Function
fadeTo([speed],opacity,[easing],[fn]) Number/String,Float,String,Function
$("#div1").fadeTo(3000,0.22,function(){ alert("透明度改變成功!"); });
11、animate() 自定義動(dòng)畫,一般來說數(shù)字變動(dòng)都可以用于動(dòng)畫。
語法:animate(params,speed,easing,callback); 樣式參數(shù),時(shí)間,可選擇,函數(shù)
$("#div1").animate({ width:300px,height,300px },3000);
其中params要用中括號(hào)括起來,可以使用的css樣式參數(shù)。注意要采用駱駝法則,如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
12、stop() 停止正在執(zhí)行動(dòng)畫
stop([clearQueue],[gotoEnd]); 兩個(gè)參數(shù)均為布爾值,第一個(gè)表示,是否停止動(dòng)畫執(zhí)行、第二個(gè)表示,如果停止,是否立即變?yōu)閳?zhí)行完成的狀態(tài),如果設(shè)置為否,則停留在執(zhí)行一半的狀態(tài)?!?/p>
$("#div1").hide(5000) //此動(dòng)畫正在執(zhí)行
$("#div1").stop(); //上一行代碼指定的動(dòng)畫停止在一半狀態(tài)
$("#div1").stop(true,true); //停止當(dāng)前動(dòng)畫,同時(shí)動(dòng)畫切換到完成執(zhí)行狀態(tài)。
13、delay() 延遲執(zhí)行動(dòng)畫 當(dāng)一個(gè)動(dòng)畫stop()了之后還能夠用delay()來延遲執(zhí)行。從停止位置繼續(xù)執(zhí)行。當(dāng)然用原來的方法繼續(xù)執(zhí)行也不可,不過沒有延時(shí)效果?! ?/p>
delay(duration,[queueName]) 設(shè)置一個(gè)延遲值來執(zhí)行動(dòng)畫 Integer,String
$("#div1").delay(3000).hide(3000); //表示在3000毫秒后執(zhí)行hide(3000);
14、jQuery.fx.off//該屬性只是是否關(guān)閉當(dāng)前頁面上的動(dòng)畫,關(guān)閉動(dòng)畫之后,沒有動(dòng)畫效果,所有設(shè)置了執(zhí)行時(shí)間的動(dòng)畫會(huì)瞬間完成。注意此屬性出現(xiàn)的位置。出現(xiàn)的位置不同影響的范圍也不同?! ?/p>
$(function(){
jQuery.fx.off = true; //屬性在事件外面,對(duì)頁面加載后執(zhí)行的所有動(dòng)畫有效
$("#div1").click(function(){ //屬性如果寫在這里,僅僅對(duì)當(dāng)前點(diǎn)擊事件無效,不影響其他事件的動(dòng)畫
$("#div1").hide(3000); //注意由于jQuery.fx.off設(shè)置為了true,因此3000毫秒失效,相當(dāng)于hide();
});
})
15、jQuery.fx.interval //該屬性設(shè)置動(dòng)畫的幀速,單位是毫秒,如果設(shè)置的時(shí)間越小,就越平滑。,屬性出現(xiàn)的位置同樣有影響范圍
$(function(){
jQuery.fx.interval = 1000;
$("#div1").click(function(){
$("#div1").hide(3000); //jQuery.fx.interval設(shè)置為1000,也就是1秒鐘,改變一次效果?!?
});
})
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jquery實(shí)現(xiàn)tab選項(xiàng)卡切換效果(懸停、下方橫線動(dòng)畫位移)
- jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示動(dòng)畫邊框特效
- jQuery實(shí)現(xiàn)的背景顏色漸變動(dòng)畫效果示例
- 淺談原生JS實(shí)現(xiàn)jQuery的animate()動(dòng)畫示例
- 利用原生JS與jQuery實(shí)現(xiàn)數(shù)字線性變化的動(dòng)畫
- 詳解jQuery停止動(dòng)畫——stop()方法的使用
- 原生js實(shí)現(xiàn)jquery函數(shù)animate()動(dòng)畫效果的簡單實(shí)例
- jQuery Ajax 加載數(shù)據(jù)時(shí)異步顯示加載動(dòng)畫
- jQuery實(shí)現(xiàn)圖像旋轉(zhuǎn)動(dòng)畫效果
- 詳解JQuery基礎(chǔ)動(dòng)畫操作
相關(guān)文章
基于jquery的9行js輕松實(shí)現(xiàn)tab控件示例
tab控件的實(shí)現(xiàn)方法有很多,在本文為大家詳細(xì)介紹下如何通過9行js實(shí)現(xiàn)簡單的tab控件,感興趣的朋友不要錯(cuò)過2013-10-10
JQuery發(fā)送ajax請(qǐng)求時(shí)中文亂碼問題解決
這篇文章主要介紹了JQuery發(fā)送ajax請(qǐng)求時(shí)中文亂碼問題解決,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
jQuery中extend函數(shù)的實(shí)現(xiàn)原理詳解
這篇文章主要介紹了jQuery中extend函數(shù)的實(shí)現(xiàn)原理詳解,extend()函數(shù)用于jQuery插件的開發(fā),本文主要分析它的實(shí)現(xiàn)原理,需要的朋友可以參考下2015-02-02
jquery+CSS3模擬Path2.0動(dòng)畫菜單效果代碼
這篇文章主要介紹了jquery+CSS3模擬Path2.0動(dòng)畫菜單效果代碼,涉及jquery鼠標(biāo)click點(diǎn)擊事件及頁面元素樣式動(dòng)態(tài)變換的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-08-08
jQuery插件實(shí)現(xiàn)的日歷功能示例【附源碼下載】
這篇文章主要介紹了jQuery插件實(shí)現(xiàn)的日歷功能,結(jié)合完整實(shí)例形式分析了jQuery datepicker插件實(shí)現(xiàn)日歷功能的相關(guān)操作技巧,需要的朋友可以參考下2018-09-09
jQuery.cookie.js使用方法及相關(guān)參數(shù)解釋
一個(gè)輕量級(jí)的cookie 插件,可以讀取、寫入、刪除 cookie。這篇文章主要介紹了jQuery.cookie.js使用方法及相關(guān)參數(shù)解釋,需要的朋友可以參考下2017-03-03
基于jQuery Bar Indicator 插件實(shí)現(xiàn)進(jìn)度條展示效果
這篇文章主要介紹了基于jQuery Bar Indicator 插件實(shí)現(xiàn)進(jìn)度條展示效果的相關(guān)資料,需要的朋友可以參考下2015-09-09

