如何用jQuery中的簡單動畫

大家好,我是易學前端筆記,今天給大家分享如何用jQuery實現超簡單的動畫

hide(time)將元素的display變為none,可以設置時間,讓其緩慢的變化

show(time)將元素的display變為block,可以設置時間,讓其緩慢的變化

fadeln(),fadeOut()

只改變元素透明度,out會在指定的一段時間內降低元素的不透明度,直到完全消失,in則相反

slideDown(),slideUp()

只改變元素的高度,如果一個元素的display為none,調用down時元素將由上至下延伸顯示,up則相反

toggle():切換元素的可見狀態,如果是可見,則切換為隱藏,如果原始是隱藏,則切換為可見

slideToggle():通過高度變化來切換匹配元素的可見性

fadeToggle通過透明度來切換元素的可見性,淡入淡出的效果

fadeTo(speed,opacity,[fn]):切換元素的透明度 。

speed:三種預定速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如:1000)

opacity:一個0至1之間表示透明度的數字。

fn:在動畫完成時執行的函數,每個元素執行一次。

如何用jQuery中的簡單動畫

如何用jQuery中的簡單動畫

如何用jQuery中的簡單動畫

自定義動畫:

如何用jQuery中的簡單動畫

停止動畫:

如何用jQuery中的簡單動畫

延遲動畫:

如何用jQuery中的簡單動畫


分享到:


相關文章: