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

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

屬性值里面的格式和CSS相似，但也有區別如字體的設置，在CSS中是font-size: 4em，而在動畫的屬性值中是fontSize:"4em" 。
animate實現的顯示和隱藏：

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

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

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

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

5、jQuery動畫隊列
對于一個元素可以應用多個動畫效果，為便于管理引入了動畫隊列的概念，

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

上面是隊列動畫，queue使用默認值為true，三個動畫依次執行，而下面是非隊列動畫，一次執行三個

$("#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()函數
$("#show").click(function () {
var n = $("p").queue("fx");
$("span").text("隊列的長度是: " + 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();    

這段代碼調用queue("fx")函數取得作用于標簽<p>上的動畫隊列，然后使用length獲得其長度
jQuery還有其他一些比較常用的用法
queue(callback)
queue(queue) 傳入動畫隊列作為參數
dequeue() 用于從動畫隊列中移除一個隊列函數

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。