JQuery學習筆記（四）

五、動畫效果

1、不使用動畫效果顯示和隱藏元素
主要是使用show()和hide()兩個方法來實現
需要注意兩點
a. JQuery主要是將display設定為none來隱藏元素的，即使封裝集中的某一項已經是hide狀態，它也會作為返回封裝集中的內

容被返回
b. 如果顯示設定了display為none，那在使用show方式時，回將display設定為block，反之，則會根據情況進行設定block或

inline

toggle()方法可以變換顯示狀態

2、使用動畫效果顯示和隱藏元素
hide(speed,callback)
speed    可以是毫秒或者預定義的slow, normal, fast
callback    當動畫完成時調用的回呼函數，沒有參數，但是this代表運行動畫的對象（元素）

show(speed,callback)
toggle(speed,callback)

3、其他的內建效果

fadeIn()     漸層進入
fadeOut()    漸層淡出
fadeOut(speed,callback)
fadeIn(speed,callback)
fadeTo(speed,opacity,callback)        opacity指定其透明度，值範圍是0.0-1.0
slideDown(speed,callback)
slideUp(speed,callback)
slideToggle(speed,callback)
stop()

4、定製化自己的動畫

animate(properties,duration,easing,callback)
animate(properties,options)

properties    JS物件類型，用於描述屬性最後所要達到的值。除了設定數字值外，還可以設定字元值hide, show, or
toggle
duration    類似於之前的speed
easing   
callback    類似於之前的callback
options   

舉個例子：
$('.animateMe').each(function(){
$(this).animate(
{
width: $(this).width() * 2,
height: $(this).height() * 2
},
2000
);
});