12.用jQuery操作動畫

 

 

 

我們可以藉由 jQuery 所提供的一些動畫方法來執行一些簡單動畫，只要載入jQuery的js函式庫並寫一些簡單的程式就可以產生動畫效果了。

一、基本方法：hide(), show(), toggle()

二、滑動方法：slideDown()、slideUp()、slideToggle()

三、淡入淡出方法：：fadeIn()、fadeOut()、fadeToggle()、fadeTo()

上面三種方式可以用不同的方式讓元素出現或隱藏，也可以加入參數 "fast" (200ms)、"slow" (600ms)來調整速度，預設是400ms。
其中fadeTo還可以指定0~1的透明度，如fadeTo(5000, 0.5) 表示5秒內轉換到半透明度。

四、自訂動畫：

jQuery操作動畫的概念，是把動作一個一個放在序列裡，再依序執行動畫，如 fx = [action1, action2, action3, ....]

練習12-1：

 

1. 指定動畫 animate()
   試著加入動畫順序：slideUp -> slideDown -> {opacity:0.5} -> {marginLeft:0} -> {width:800, height:400, opacity:1}
   注意，數字單位預設為 px ，也可以以用 "2em", "50%", "+=100"的方式來指定值(但就不一定能漸變動畫)
2. 加入動作 queue() + dequeue() (插入動作序列+執行下一個動畫)：
   試著在第三個步驟後，加入 css
   .queue(function(){
   $(this).css("border-width", "10px").dequeue();
   })
3. 延遲動畫 delay()
4. 暫停動畫 stop()：將當前動畫停止，stop(是否清空動畫序列, 是否設定為當前動畫結束的css)
5. 結束動畫 finish()：跳到動畫序列最後一個動作(並設定為最後一個動作的CSS)，並結束