animate()參數介紹：
animate() 方法執行 CSS 屬性集的自定義動畫。
該方法通過CSS樣式將元素從一個狀態改變為另一個狀態。CSS屬性值是逐漸改變的，這樣就可以創建動畫效果。
只有數字值可創建動畫（比如 "margin:30px"）。字符串值無法創建動畫（比如 "background-color:red"）。
PS:但是如果你引用了最新jquery ui框架的話backgroudColor,color之類的屬性也可以實現漸變了。
PS：使用 "+=" 或 "-=" 來創建相對動畫（relative animations）。
首先依然要引用jquery框架，你懂得。
再來看看代碼：
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
<div style="border:5px #666 solid; width:500px; height:350px; overflow:hidden;">
<div id="box">
<div style="width:500px; height:350px; background-color:#0F0;">One</div>
<div style="width:500px; height:350px; background-color:#00F;">Two</div>
<div style="width:500px; height:350px; background-color:#696;">Three</div>
</div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var Top=-350;//定義一個向上移動的距離，這個數值和你圖片或DIV的高度相等
var Time=500;//定義一個速度
function move(){
$("#box").animate({"margin-top":Top},Time);//animate方法，只能對數值型的值進行漸變
Top+=-350;//運行一次增加一個圖片的高度
if(Top==-1050)//判斷當總高度大於你DIV或者圖片總高度
{
Top=0;//把距離設置回0
Time=400;//加快移動速度
}
else
{
Time=500;//否則減慢速度
}
}
setInterval(move,3000);//3秒執行一次move()
})
</script>
</body>
</html>
js部分也可以這樣，實現一個回滾效果：
代碼如下:
$(document).ready(function(){
var Top=-350;
var Time=500;
var more=-50;
function move(){
$("#box").animate({"margin-top":Top+more},Time);
$("#box").animate({"margin-top":Top},300);
Top+=-350;
if(Top==-1050)
{
Top=0;
more=50;
Time=400;
}
else
{
Time=500;
more=-50;
}
}
setInterval(move,3000);
})