這兩個方法是JQuery中最簡單的兩個動畫效果。hide()是把元素的display樣式設爲“none”，show()是把元素的display樣式設爲原來的樣式（除了none之外的樣式）。JQuery在調用hide()時會記住元素原先的display屬性，當調用show()的時候會根據hide()方法記住的display屬性來顯示元素。
語法：
$("element").hide([speed][,callback])
$("element").show([speed][,callback])
speed：動畫速度的參數，一般以毫秒爲單位，也查以使用slow,fast等，如果不加此參數的話，那不會出現動畫過渡效果。
callback：動畫執行結束後回調函數
以上兩個動畫會同時表現出三種效果：高度變化、寬度變化、透明度的變化。
示例：
$("element").show(1000);元素在一秒內動態顯示出來。
$("element").hide(1000);元素在一秒內動態隱藏起來。
下面兩個函數互爲回調函數，一旦運行起來，就會把相應的元素以動畫形式反覆顯示、隱藏。
function hideDiv() {
$("#dd").hide(2000, function () { showDiv(); });
}
function showDiv() {
$("#dd").show(2000, function () { hideDiv(); });
}
二、fadeIn()方法和fadeOut()方法
這兩個方法只改變元素的透明度，不改變大小。
語法：
$("element").fadeIn([speed][,callback])
$("element").fadeOut([speed][,callback])
speed：動畫速度的參數，一般以毫秒爲單位，也查以使用slow,fast等，如果不加此參數的話，那也會出現默認動畫過渡效果。
callback：動畫執行結束後回調函數
示例：
$("element").fadeOut(1000);在一秒內，元素越來越透明，直到完全消失。
$("element").fadeIn(1000);與fadeOut()相反。
下面兩個函數互爲回調函數，一旦運行起來，就會把相應的元素以反覆出現“褪色”與“上色”的動畫效果。
function hideDiv() {
$("#dd").fadeOut(2000, function () { showDiv(); });
}
function showDiv() {
$("#dd").fadeIn(2000, function () { hideDiv(); });
}
三、slideUp()方法和slideDown()方法
這兩個方法只改變元素的高度，不改變寬度和透明度
語法：
$("element").slideUp([speed][,callback])
$("element").slideDown([speed][,callback])
speed：動畫速度的參數，一般以毫秒爲單位，也查以使用slow,fast等，如果不加此參數的話，那也會出現默認動畫過渡效果。
callback：動畫執行結束後回調函數
示例：
$("element").slideUp(1000);在一秒內，元素高度逐漸變爲0。
$("element").slideDown(1000);與fadeOut()相反。
下面兩個函數互爲回調函數，一旦運行起來，就會把相應的元素以反覆出現“褪色”與“上色”的動畫效果。
function hideDiv() {
$("#dd").slideUp(2000, function () { showDiv(); });
}
function showDiv() {
$("#dd").slideDown(2000, function () { hideDiv(); });
}
四、自定義動畫方法animate()
上面的三組方法能夠實現簡單的動畫，但如果需要一些高級動畫時就需要使用animate()方法來實現。
語法：
$("element").animate(params,speed,callback);
params：包含樣式{屬性:值}的一組參數。如：{backgroundColor:"red",color:"yellow",height:"160px"}
speed：動畫顯示的速度，以毫秒爲單位
callback：回調函數
1.自定義簡單動畫
簡單的一次性動畫
$("dd").animate({left: "500px"}, 3000);
該動畫的效果是在3秒內使dd元素右移500像素。需要事選把dd元素的position設置爲absolute或relative。
2.累加累減動畫
在現有的狀態下進行屬性的累加變化，實現動態動畫。
$("dd").animate({left: "+=500px"}, 3000);
它的作用是在當前位置向後再移500像素。當然也可以設爲{left:"-=500px"}使動畫向右累加移動。
3.多重動畫
a.同時執行多個動畫，即同時改變元素的多個樣式。
$("#dd").animate({ left: "800",width:"200",height:"400" }, 3000);
它的作用是dd元素在向右移動的同時把寬度加大爲200像素，並把高度加大爲400像素。
b.按順序執行多個動畫，按一定的次序依次改變元素的多個樣式。
$("#dd").animate({ left: "800" }, 3000).animate({ top: "300" }, 3000).animate({ width: "300",left:"-=150" }, 3000);
它的作用是dd元素先右移800像素，再下移300像素，最後再同時拉寬左移
4.使用animate()的回調函數
如果在上面“多重動畫”的基礎上，讓動畫執行完成後，把元素的顏色變成紅色的話，有的人會這樣寫代碼：
$("#dd").animate({ left: "800" }, 3000).animate({ top: "300" }, 3000).animate({ width: "300",left:"-=150" }, 3000).css("background-color","red");
這種寫法不正確，因爲css()不會被加到動畫過程中，而是立即被執行。我們可以把改變顏色的代碼放在回調函數中實現動畫的排隊效果。
$("#dd").animate({ left: "800" }, 3000).animate({ top: "300" }, 3000).animate({ width: "300",left:"-=150" }, 3000,function(){changeColor(););
function changeColor() {
$("#dd").css("background-color","red");
}
在最後一個動畫效果執行完成後回執行回調函數changeColor();
5.停止動畫
停止當前執行的動畫。
語法：
$("element").stop([clearQueue][,gotoEnd]);
clearQueue：bool，代表是否要清空未執行的動畫隊列
gotoEnd：bool，代表將正在執行的動畫直接跳到末狀態
如果我們做了一個下拉菜單，當鼠標移上去的時候就菜單下拉，當鼠標離開的時候菜單上卷，下拉和上卷的動畫時間都是3 秒種。
$("#dd").hover(
function () {
$("#dd").animate({ height: "500" }, 3000);
},
function () {
$("#dd").animate({ height: "100" }, 3000);
}
);
如果我快速不斷地將鼠標移入移出菜單（即，當菜單下拉動畫未完成時，鼠標又移出了菜單）就會產生“動畫積累"，當鼠標停止移動後，積累的動畫還會持續執行，直到動畫序列執行完畢。這樣導致動畫效果與鼠標動作不一致。
要解決此問題只需要在移入移出動畫之前加入stop()，結束當前動畫進入下個動畫即可。
代碼如下：
$("#dd").hover(
function () {
$("#dd").stop().animate({ height: "500" }, 3000);
},
function () {
$("#dd").stop().animate({ height: "100" }, 3000);
}
);
如果需到組合動畫，在移入移出動畫之前加入stop()來停止當前動畫，如下
$("#dd").hover(
function () {
$("#dd").stop().animate({ height: "500" }, 3000).animate({ width: "500px" }, 3000);
},
function () {
$("#dd").stop().animate({ height: "100" }, 3000).animate({ width: "100px" },3000);
}
);
效果並不好，因爲stop()只是停止了當前第一步的動畫（即{height:"500"}），然後又進入了第二步的動畫（即[width:"500"}）。
此時stop()的第一個參數就派上了用場，它會把下面沒有執行的動畫序列都清空掉。
$("#dd").hover(
function () {
$("#dd").stop(true).animate({ height: "500" }, 3000).animate({ width: "500px" }, 3000);
},
function () {
$("#dd").stop(true).animate({ height: "100" }, 3000).animate({ width: "100px" },3000);
}
);
當然也可以使用第二個參數，讓動畫達到最後狀態。如：stop(false,true)
判斷元素是否正處於動畫中
if(!$("element").is(":animated")){
//...
}
轉載出自：http://hi.baidu.com/grayworm/item/6b8f43e8ec6a8d0e560f1da1