1、基本效果
隱藏元素
hide(speed,[callback]);
顯示元素
show(speed,[callback])
交替顯示隱藏
toggle(speed,[callback])
速度對(duì)應(yīng)的有三個(gè)常量，為"slow" "nomal" "fast"
三種速度的值分別為600毫秒、400毫秒和200毫秒
回調(diào)函數(shù)每個(gè)元素執(zhí)行一次
2、滑動(dòng)效果
向上收縮(卷起)
slideUp(speed,[callback]);
向下展開
slideDown(speed,[callback]);
交替伸縮樣式
slideToggle(speed,[callback]);
3、淡入淡出效果
淡入效果
fadeIn(speed,[callback]);
淡出效果
fadeOut(speed,[callback]);
自定義不透明度
fadeTo(speed,opacity,[callback]);
上面兩種方式要么淡入要么淡出，不能停留在中間的某個(gè)狀態(tài)，自定義不透明度可以實(shí)現(xiàn)。
第一個(gè)和第三個(gè)參數(shù)和上面是一樣的，opacity是要調(diào)整到的不透明度值(0到1之間的數(shù)字)
如果是0和fadeOut的效果一樣，參數(shù)調(diào)整為1和fadeIn的效果一樣。
調(diào)用方式：$("first").fadeTo("slow",0.3);
頁面淡入淡出的透明度范圍為0~0.3。
4、自定義動(dòng)畫效果
自定義動(dòng)畫animate(params[,duration[,easing[,callback]]])
prarms一組包含作為動(dòng)畫屬性和終值樣式屬性及其值的集合
duration (可選)三種預(yù)訂速度之一的字符串，或者表示動(dòng)畫時(shí)長(zhǎng)的毫秒數(shù)值(如1000)
easing (可選)要使用的擦除效果的名稱(需要插件支持)，默認(rèn)jQuery支持linear和swing
callback (可選)在動(dòng)畫執(zhí)行完成時(shí)的回調(diào)函數(shù)

$("#block").animate({
 "70%",
height: "100%",
fontSize: "4em"
}, 1000 );

屬性值里面的格式和CSS相似，但也有區(qū)別如字體的設(shè)置，在CSS中是font-size: 4em，而在動(dòng)畫的屬性值中是fontSize:"4em" 。
animate實(shí)現(xiàn)的顯示和隱藏：

$("#toggle").click(function(){
$("#block").animate({
height: 'toggle', opacity: 'toggle'
}, 3000); 
}); 

代碼中height和opacity在有和無之間進(jìn)行切換，這樣就和顯示隱藏的效果基本一樣。

animate函數(shù)還有另外一種使用方式，它可以只帶兩個(gè)參數(shù)
animate(params,options) 用于創(chuàng)建自定義的動(dòng)畫
第一個(gè)參數(shù)和之前的一樣，表示一組動(dòng)畫屬性值，第二個(gè)參數(shù)為一組選項(xiàng)設(shè)置，用于設(shè)置動(dòng)畫速度、
easing插件樣式、是否加入動(dòng)畫隊(duì)列等，可用的選項(xiàng)如下：
duration 速度選項(xiàng)
easing 擦除效果選項(xiàng)
complete 動(dòng)畫完成時(shí)執(zhí)行的函數(shù)
step callback函數(shù)
queue 是否將此動(dòng)畫進(jìn)入循環(huán)隊(duì)列
調(diào)用方式為：

$("#block").animate({
"70%"
heigth:"100%",
fontSize:"4em"
},{duration:1000}
);

5、jQuery動(dòng)畫隊(duì)列
對(duì)于一個(gè)元素可以應(yīng)用多個(gè)動(dòng)畫效果，為便于管理引入了動(dòng)畫隊(duì)列的概念，

$("#go1").click(function(){
$("#block2").animate( {  "70%"}, 1000 )
.animate( { fontSize: '5em' } , 1000 )
.animate( { paddingLeft: '20px' }, 1000);
}); 

上面是隊(duì)列動(dòng)畫，queue使用默認(rèn)值為true，三個(gè)動(dòng)畫依次執(zhí)行，而下面是非隊(duì)列動(dòng)畫，一次執(zhí)行三個(gè)

$("#go2").click(function(){
$("#block1").animate( {  "70%"}, { queue: false, duration: 1000 } )
.animate( { fontSize: '5em' } , { queue: false, duration: 1000 } )
.animate( { paddingLeft: '20px' }, { queue: false, duration: 1000 });
});
jQuery中的queue()函數(shù)
$("#show").click(function () {
var n = $("p").queue("fx");
$("span").text("隊(duì)列的長(zhǎng)度是: " + n.length);
});
function runIt() {
$("p").show("slow");
$("p").animate({left:'+=200'},2000);
$("p").slideToggle(1000);
$("p").slideToggle("fast");
$("p").animate({left:'-=200'},1500);
$("p").hide("slow");
$("p").show(1200);
$("p").slideUp("normal", runIt);
}
runIt();    

這段代碼調(diào)用queue("fx")函數(shù)取得作用于標(biāo)簽<p>上的動(dòng)畫隊(duì)列，然后使用length獲得其長(zhǎng)度
jQuery還有其他一些比較常用的用法
queue(callback)
queue(queue) 傳入動(dòng)畫隊(duì)列作為參數(shù)
dequeue() 用于從動(dòng)畫隊(duì)列中移除一個(gè)隊(duì)列函數(shù)

總結(jié)

以上是生活随笔為你收集整理的jQuery中的动画与效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。