# Effects ## $.fx 全局地動畫設置： * `$.fx.off` (在支持css transition 的瀏覽器中默認為false)：設置true來禁止所有[`animate()`](#animate) transitions。 * `$.fx.speeds`：用來設置動畫時間的對象。 * `_default` (400 ms) * `fast` (200 ms) * `slow` (600 ms) 改變現有值或者添加一個新屬性去影響使用一個字符串來設置時間的動畫。 ## animate ``` animate(properties, [duration, [easing, [function(){ ... }]]]) => self animate(properties, { duration: msec, easing: type, complete: fn }) => self animate(animationName, { ... }) => self ``` 對當前對象集合中元素進行css transition屬性平滑過渡。 * `properties`: 一個對象，該對象包含了css動畫的值，或者css幀動畫的名稱。 * `duration` (默認 400)：以毫秒為單位的時間，或者一個字符串。 * `fast` (200 ms) * `slow` (600 ms) * 任何[`$.fx.speeds`](#$.fx)自定義屬性 * `easing` (默認 `linear`)：指定動畫的緩動類型，使用以下一個： * `ease` * `linear` * `ease-in` / `ease-out` * `ease-in-out` * [`cubic-bezier(...)`](http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag) * `complete`：動畫完成時的回調函數 `delay` Zepto 還支持以下 [CSS transform](http://www.w3.org/TR/css3-transforms/#transform-functions) 屬性： * `translate(X|Y|Z|3d)` * `rotate(X|Y|Z|3d)` * `scale(X|Y|Z)` * `matrix(3d)` * `perspective` * `skew(X|Y)` 如果duration參數為 `0` 或 `$.fx.off` 為 true(在不支持css transitions的瀏覽器中默認為true)，動畫將不被執行；替代動畫效果的目標位置會即刻生效。類似的，如果指定的動畫不是通過動畫完成，而且動畫的目標位置即可生效。這種情況下沒有動畫， `complete`方法也不會被調用。 如果第一個參數是字符串而不是一個對象，它將被當作一個css關鍵幀動畫 [CSS keyframe animation](http://www.w3.org/TR/css3-animations/#animations)的名稱。 ``` $("#some_element").animate({ opacity: 0.25, left: '50px', color: '#abcdef', rotateZ: '45deg', translate3d: '0,10px,0' }, 500, 'ease-out') ``` Zepto只使用css過渡效果的動畫。jquery的easings不會支持。jquery的相對變化("=+10px") syntax 也不支持。請查看 [list of animatable properties](http://www.w3.org/TR/css3-transitions/#animatable-properties-)。瀏覽器的支持可能不同，所以一定要測試你所想要支持的瀏覽器。