Jquery動畫效果設定大全
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery.1.11.1.min.js"></script>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background: red;
display: none;
}
</style>
</head>
<body>
//Jquery動畫設定有下面方法
show() :顯示 display->block
hide() 隱藏 display->none
toggle() 切換顯示和隱藏
slideDown() 向下滑動 改變display和高度（引數為毫秒，滑動時間）
slideUp() 向上滑動 改變display和高度
slideToggle() 切換上下滑動
fadeIn() 淡入 opacity->1
fadeOut() 淡淡入出 opacity->0
fadeTo() 改變透明度
fadeToggle() 切換淡入淡出
animate() 自定義動畫
stop() 停在當前位置
finish() 終止動畫，停在最終位置
delay() 設定延遲
//html程式碼
<button>顯示隱藏</button>
<button>結束</button>
<button>停止</button>
<div id="box"></div>
<script type="text/javascript">
//例子
$("button").eq(0).click(function(){
$("#box").show(); //第一個按鈕點選的時候，div元素從隱藏的狀態顯示出來
});
$("button").eq(0).mouseover(function(){
$("#box").show(); //滑鼠放到第一個按鈕的時候，div元素從隱藏的狀態顯示出來
}).mouseout(function(){
$("#box").hide(); //滑鼠移開時，div元素從顯示狀態隱藏起來
});
$("button").eq(0).click(function(){
$("#box").toggle(); //第一個按鈕點選的時候，div元素從顯示狀態隱藏起來
});
$("button").eq(0).click(function(){
//$("#box").slideDown(1000); //向下的滑動時間是1秒
$("#box").slideToggle(); //切換上下滑動
});
$("button").eq(0).click(function(){
$("#box").fadeIn(2000); //淡入時間為2秒,淡入的意思是顯示出來時間
//$("#box").fadeOut(2000);
$("#box").fadeToggle(2000); //淡入淡出
//$("#box").fadeTo(2000,0.9); //改變透明度
});
$("#box").css("display","block");
$("button").eq(0).click(function(){
$("#box").delay(2000).animate({ //第一個按鈕點選的時候，div元素將再2秒後飄逸，
"margin-left":"200px",
"margin-top":"200px"
},2000); //這個時間是指整個過程的持續時間
});
$("button").eq(1).click(function(){
$("#box").finish(); //第二個按鈕點選的時候，運動中的動畫立刻停在結束位置
});
$("button").eq(2).click(function(){
$("#box").stop(); //第三個按鈕點選的時候，正在運動中的動畫立刻停止當前位置
});
//部分網頁顯示效果
</script>
</body>
</html