我們都知道動畫的功能，今天介紹幾個簡單的動畫的操作
一、動畫——顯示跟隱藏
首先先寫一個簡單的頁面
<button id="showbox">顯示</button>
<button id="hidebox">隱藏</button>
<button id="showhidebox">顯示或隱藏</button>
<div id="box"></div>
三個按鈕，點擊改變div的狀態，簡單給div設置個寬高跟背景色，方便我們觀看效果
思路：
隱藏hide() 顯示show() 顯示或隱藏 toggle()
參數：
動畫時間(“slow”,“normal”, “fast”) / 毫秒 ,
切換效果 默認是"swing"，可用參數"linear" ,
動畫執行完成的回調函數
原理：動畫原理width 、height、opacity、
margin、 padding 、 overflow:hidden ;
效果：display=“none” / display=""
下面是JQ代碼
//隱藏
$("#hidebox").click(function(){
$("#box").hide(2000,function(){
console.log("--隱藏 動畫完成---")
});
})
//顯示
$("#showbox").click(function(){
$("#box").show(2000,function(){
console.log("--顯示 動畫完成---")
});
})
//顯示或隱藏
$("#showhidebox").click(function(){
$("#box").toggle(2000,function(){
console.log("-- 動畫完成---")
});
})
二、動畫——滑入跟滑出
首先也是先寫一個簡單的頁面
<button id="one">滑入</button>
<button id="two">滑出</button>
<button id="three">滑入或滑出</button>
<div id="box"></div>
三個按鈕，點擊改變div的狀態，簡單給div設置個寬高跟背景色，方便我們觀看效果
思路：
滑入slideDown() 滑出slideUp() 滑入或滑出slideToggle()
動畫過程原理： height 、 margin-top, margin-bottom 、padding-top、 padding-bottom
效果：display:none / diplay:""
下面是JQ代碼
$("#two").click(function(){
$("#box").slideUp(10000);
})
$("#one").click(function(){
$("#box").slideDown(10000);
})
$("#three").click(function(){
$("#box").slideToggle();
})
三、動畫——淡入跟淡出
首先也是先寫一個簡單的頁面
<<button id="one">淡入</button>
<button id="two">淡出</button>
<button id="three">淡入或淡出</button>
<button id="four">到透明度0.5</button>
<div id="box"></div>
四個按鈕，點擊改變div的狀態，簡單給div設置個寬高跟背景色，方便我們觀看效果
思路：
淡入 fadeIn() 淡出 fadeOut() 淡入或淡出 fadeToggle() 到指定的透明度fadeTo()
動畫過程原理： opacity
效果：display:none / diplay:""
下面是JQ代碼
$("#two").click(function(){
$("#box").fadeOut(3000) //透明度 0
})
$("#one").click(function(){
$("#box").fadeIn(3000)// //透明度 1
})
$("#three").click(function(){
$("#box").fadeToggle(3000)//
})
$("#four").click(function(){
$("#box").fadeTo(2000,0.5)//
})
當然 既然是用jQuery做的效果，在頁面別忘了引用jQuery外部文件~