jQuery學(xué)習(xí)筆記之jQuery的動(dòng)畫
更新時(shí)間:2010年12月22日 14:39:30 作者:
jQuery學(xué)習(xí)筆記之jQuery的動(dòng)畫,需要的朋友可以參考下。
一.系統(tǒng)預(yù)定義的動(dòng)畫函數(shù)
1.顯示隱藏函數(shù)
show(); //顯示元素(同時(shí)增加寬、高、不透明度)
hide(); //隱藏元素
執(zhí)行hide()隱藏界面元素,相當(dāng)于將css樣式中的display:none.
我們也可以在函數(shù)中加入?yún)?shù),具體如下:
show("slow");
除了slow取值外,還可以設(shè)置為normal,fast,分別代表時(shí)間為600,400,200毫秒
我們也可以加如具體時(shí)間取值。具體如下:
slow(1000);
這樣代表時(shí)間完全顯示出元素的時(shí)間間隔為1000毫秒
2.不透明度函數(shù)
fadeIn();//逐漸顯示元素(只增加不透明度)
fadeOut();//逐漸隱退元素
3.高寬度函數(shù)
slideDown();//逐漸增加元素高度(只增加元素高度)
slideUp();//逐漸縮短元素高度
二.自定義動(dòng)畫函數(shù)
animate(params,speed,callback);
params:取值為一個(gè)樣式屬性和取值的映射
speed:速度
callback:動(dòng)畫完成時(shí)的執(zhí)行函數(shù)
其中params的樣式屬性取值可以是多個(gè)屬性,也可以是累增,累減的取值
例子:
$(function(){
$(#id1).click(function(){
$(this).animate({left:"+=500px",height:"200px"},3000,function(){
$(this).css("border","5px solid blue")
})
})
})
1.停止元素動(dòng)畫
stop();
結(jié)束當(dāng)前執(zhí)行的動(dòng)畫,并立即執(zhí)行下面定義的動(dòng)畫
2.判斷是否在動(dòng)畫狀態(tài)
is(":animate")
3.其他動(dòng)畫函數(shù)
toggle(speed,callback);//立即切換元素狀態(tài)(高,寬,不透明度),如果隱藏則切換到顯示,如果顯示則切換的隱藏
sildeToggle(speed,callback);//改變高度方式切換元素狀態(tài)
fadeto(speed,opacity,callback);切換到指定的不透明度值
1.顯示隱藏函數(shù)
show(); //顯示元素(同時(shí)增加寬、高、不透明度)
hide(); //隱藏元素
執(zhí)行hide()隱藏界面元素,相當(dāng)于將css樣式中的display:none.
我們也可以在函數(shù)中加入?yún)?shù),具體如下:
show("slow");
除了slow取值外,還可以設(shè)置為normal,fast,分別代表時(shí)間為600,400,200毫秒
我們也可以加如具體時(shí)間取值。具體如下:
slow(1000);
這樣代表時(shí)間完全顯示出元素的時(shí)間間隔為1000毫秒
2.不透明度函數(shù)
fadeIn();//逐漸顯示元素(只增加不透明度)
fadeOut();//逐漸隱退元素
3.高寬度函數(shù)
slideDown();//逐漸增加元素高度(只增加元素高度)
slideUp();//逐漸縮短元素高度
二.自定義動(dòng)畫函數(shù)
animate(params,speed,callback);
params:取值為一個(gè)樣式屬性和取值的映射
speed:速度
callback:動(dòng)畫完成時(shí)的執(zhí)行函數(shù)
其中params的樣式屬性取值可以是多個(gè)屬性,也可以是累增,累減的取值
例子:
復(fù)制代碼 代碼如下:
$(function(){
$(#id1).click(function(){
$(this).animate({left:"+=500px",height:"200px"},3000,function(){
$(this).css("border","5px solid blue")
})
})
})
1.停止元素動(dòng)畫
stop();
結(jié)束當(dāng)前執(zhí)行的動(dòng)畫,并立即執(zhí)行下面定義的動(dòng)畫
2.判斷是否在動(dòng)畫狀態(tài)
is(":animate")
3.其他動(dòng)畫函數(shù)
toggle(speed,callback);//立即切換元素狀態(tài)(高,寬,不透明度),如果隱藏則切換到顯示,如果顯示則切換的隱藏
sildeToggle(speed,callback);//改變高度方式切換元素狀態(tài)
fadeto(speed,opacity,callback);切換到指定的不透明度值
您可能感興趣的文章:
- 用js實(shí)現(xiàn)的模擬jquery的animate自定義動(dòng)畫(2.5K)
- Jquery實(shí)現(xiàn)帶動(dòng)畫效果的經(jīng)典二級導(dǎo)航菜單
- JQuery動(dòng)畫和停止動(dòng)畫實(shí)例代碼
- 利用JQuery動(dòng)畫制作滑動(dòng)菜單項(xiàng)效果實(shí)現(xiàn)步驟及代碼
- jquery動(dòng)畫1.加載指示器
- 不用jQuery實(shí)現(xiàn)的動(dòng)畫效果代碼
- jQuery 動(dòng)畫彈出窗體支持多種展現(xiàn)方式
- jquery 經(jīng)典動(dòng)畫菜單效果代碼
- jquery animate 動(dòng)畫效果使用說明
- Jquery 自定義動(dòng)畫概述及示例
相關(guān)文章
jquery動(dòng)態(tài)加載圖片數(shù)據(jù)練習(xí)代碼
這里我只是隨便做了下,上面是照片列表和兩個(gè)按鈕,單擊小圖片下面顯示大圖片,當(dāng)點(diǎn)擊按鈕時(shí)可以查看下一頁,上一頁的圖片。2011-08-08Jquery數(shù)字上下滾動(dòng)動(dòng)態(tài)切換插件
有時(shí)我們需要?jiǎng)討B(tài)的展示訪問次數(shù)、下載次數(shù)等效果,我們可以借助jQuery結(jié)合后臺(tái)php實(shí)現(xiàn)一個(gè)滾動(dòng)的數(shù)字展示效果。2015-08-08jQuery實(shí)現(xiàn)炫麗的3d旋轉(zhuǎn)星空效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)炫麗的3d旋轉(zhuǎn)星空效果,涉及jQuery數(shù)值運(yùn)算與頁面元素屬性動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2018-07-07jQuery實(shí)現(xiàn)表單動(dòng)態(tài)添加與刪除數(shù)據(jù)操作示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)表單動(dòng)態(tài)添加與刪除數(shù)據(jù)操作,涉及jQuery事件響應(yīng)及頁面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-07-07如何使用jquery控制CSS樣式,并且取消Css樣式(如背景色,有實(shí)例)
使用jquery控制CSS樣式,并且取消Css樣式的一個(gè)簡單小實(shí)例,需要的朋友可以參考下2013-07-07jquery animate實(shí)現(xiàn)鼠標(biāo)放上去顯示離開隱藏效果
本文為大家介紹下使用jquery animate實(shí)現(xiàn)鼠標(biāo)放上去顯示,離開就隱藏的效果,感興趣的朋友可以參考下哈,希望對大家有所幫助2013-07-07