JQuery中的DOM動畫
無動畫效果的隱藏與顯示
hide():在HTML文檔中,為一個元素調用hide()方法會將該元素的display樣式改為none。
代碼功能同css(“display”, “none”)相同。
show():將元素的display樣式改為先前的顯示狀態。
toggle():切換元素的可見狀態:如果元素時可見的,則切換為隱藏;如果元素時隱藏的,則切換為可見的。
通過設置透明度效果的隱藏與顯示,達到淡入淡出的動畫效果
fadeIn(),fadeOut():只改變元素的透明度。
fadeOut() 會在指定的一段時間內降低元素的不透明度,直到元素完全消失。
fadeIn() 則相反。
如,用600毫秒緩慢的將段落淡入:$("p").fadeIn("slow");。
fadeTo():把不透明度以漸近的方式調整到指定的值(0 – 1 之間)。並在動畫完成後可選地觸發一個回調函數。
如,用200毫秒快速將段落的透明度調整到0.25,動畫結束後,顯示一個“Animation Done”信息框:
“$("p").fadeTo("fast", 0.25, function(){
alert("Animation Done.");
});”
通過設置高度效果的隱藏與顯示,達到滑下與收起的動畫效果
slideDown(),slideUp():只會改變元素的高度。
如果一個元素的display屬性為none,當調用slideDown() 方法時,這個元素將由上至下延伸顯示。
slideUp() 方法正好相反,元素由下至上縮短隱藏。
如,用600毫秒緩慢的將段落滑下:$("p").slideDown("slow");
slideToggle():通過高度變化來切換匹配元素的可見性。
如,200毫秒快速將段落滑上或滑下,動畫結束後,會顯示一個“Animation Done”信息框:“$("p").slideToggle("fast",function(){
alert("Animation Done.");
});”
JQuery中的DOM動畫