fx 模塊提供了 animate 動畫方法，fx_methods 利用 animate 方法，提供一些常用的動畫方法。所以 fx_methods 模塊依賴於 fx 模塊，在引入 fx_methods 前必須引入 fx 模塊。

讀 Zepto 源碼系列文章已經放到了github上，歡迎star: reading-zepto

源碼版本

本文閲讀的源碼為 zepto1.2.0

GitBook

《reading-zepto》

內部方法

anim

function anim(el, speed, opacity, scale, callback) {
  if (typeof speed == 'function' && !callback) callback = speed, speed = undefined
  var props = { opacity: opacity }
  if (scale) {
    props.scale = scale
    el.css($.fx.cssPrefix + 'transform-origin', '0 0')
  }
  return el.animate(props, speed, null, callback)
}

如果 speed 的參數類型為函數，並且 callback 沒有傳遞，則認為 speed 位置的參數為 callback。

props 是過渡的屬性， fx_fethods 主要實現 show 、 hide 和 fadeIn、 fadeOut 等動畫，用到的過渡屬性為 opecity 和 scale 。

當為 scale 時，將轉換的原點設置為 0 0。

最後調用的是 fx 模塊中的 animate 方法。

hide

var document = window.document, docElem = document.documentElement,
    origShow = $.fn.show, origHide = $.fn.hide, origToggle = $.fn.toggle
function hide(el, speed, scale, callback) {
  return anim(el, speed, 0, scale, function(){
    origHide.call($(this))
    callback && callback.call(this)
  })
}

hide 方法其實就是將 opacity 的屬性設置為 0 。在動畫完成後，調用 origHide 方法，即原有的 hide 方法，將元素的 display 設置為 none。原有的 hide 方法分析見《讀Zepto源碼之樣式操作》

.show()

$.fn.show = function(speed, callback) {
  origShow.call(this)
  if (speed === undefined) speed = 0
  else this.css('opacity', 0)
  return anim(this, speed, 1, '1,1', callback)
}

show 方法首先調用原有的 hide 方法，將元素顯示出來，這是實現動畫的基本條件。

如果沒有設置 speed， 表示不需要動畫，則過渡時間 speed 設置為 0。立即顯示元素。

否則，先將 opactity 設置為 0， 再調用 anim 方法執行動畫。opacity 設置為 0 也是執行動畫的關鍵，從 0 變為 1 才有過渡的效果。

.hide()

$.fn.hide = function(speed, callback) {
  if (speed === undefined) return origHide.call(this)
  else return hide(this, speed, '0,0', callback)
}

如果 speed 沒有傳遞，簡單調用原有的 hide 方法即可，因為不需要過渡效果。

否則調用內部方法 hide。

.toggle()

$.fn.toggle = function(speed, callback) {
  if (speed === undefined || typeof speed == 'boolean')
    return origToggle.call(this, speed)
  else return this.each(function(){
    var el = $(this)
    el[el.css('display') == 'none' ? 'show' : 'hide'](speed, callback)
  })
}

toggle 方法是 show 和 hide 方法的切換。

如果 speed 沒有傳遞，或者為 boolean 值，則表示不需要動畫，調用原有的 toggle 方法即可。為什麼要有一個 boolean 值的判斷呢，這要看回 《讀Zepto源碼之樣式操作》關於 toggle 方法的分析了，原有的 toggle 方法接收一個參數，如果為 true，則指定調用 show 方法，否則調用 hide 方法。

否則，判斷每個元素的 display 屬性值，如果為 none，則調用 show 方法顯示，否則調用 hide 方法隱藏。

.fadeTo()

$.fn.fadeTo = function(speed, opacity, callback) {
  return anim(this, speed, opacity, null, callback)
}

fadeTo 可以其實是通過調節過渡時間 speed 和透明度 opacity 來實現動畫效果。

和 show 和 hide 不同的是，fadeTo 的 opacity 不一定為 1 或者 0， 可以由調用者指定。

.fadeIn()

$.fn.fadeIn = function(speed, callback) {
  var target = this.css('opacity')
  if (target > 0) this.css('opacity', 0)
  else target = 1
  return origShow.call(this).fadeTo(speed, target, callback)
}

淡入效果。

fadeIn 其實調用的是 fadeTo ，跟 show 有點類似，最終將 opacity 變為 1 。只是不處理 scale 變形。

.fadeOut()

$.fn.fadeOut = function(speed, callback) {
  return hide(this, speed, null, callback)
}

淡出。

fadeOut 調用的是 hide 方法，只是不處理 scale 變形。

.fadeToggle()

$.fn.fadeToggle = function(speed, callback) {
  return this.each(function(){
    var el = $(this)
    el[
      (el.css('opacity') == 0 || el.css('display') == 'none') ? 'fadeIn' : 'fadeOut'
    ](speed, callback)
  })
}

切換淡入淡出效果。

如果 display 為 node 時，調用 fadeIn 方法顯示，否則調用 fadeOut 方法隱藏。

系列文章

1. 讀Zepto源碼之代碼結構
2. 讀Zepto源碼之內部方法
3. 讀Zepto源碼之工具函數
4. 讀Zepto源碼之神奇的$
5. 讀Zepto源碼之集合操作
6. 讀Zepto源碼之集合元素查找
7. 讀Zepto源碼之操作DOM
8. 讀Zepto源碼之樣式操作
9. 讀Zepto源碼之屬性操作
10. 讀Zepto源碼之Event模塊
11. 讀Zepto源碼之IE模塊
12. 讀Zepto源碼之Callbacks模塊
13. 讀Zepto源碼之Deferred模塊
14. 讀Zepto源碼之Ajax模塊
15. 讀Zepto源碼之Assets模塊
16. 讀Zepto源碼之Selector模塊
17. 讀Zepto源碼之Touch模塊
18. 讀Zepto源碼之Gesture模塊
19. 讀Zepto源碼之IOS3模塊
20. 讀Zepto源碼之Fx模塊

參考

License

署名-非商業性使用-禁止演繹 4.0 國際 (CC BY-NC-ND 4.0)

最後，所有文章都會同步發送到微信公眾號上，歡迎關注,歡迎提意見：

作者：對角另一面