fx 模块提供了 animate 动画方法，fx_methods 利用 animate 方法，提供一些常用的动画方法。所以 fx_methods 模块依赖于 fx 模块，在引入 fx_methods 前必须引入 fx 模块。
读 Zepto 源码系列文章已经放到了github上，欢迎star: reading-zepto
源码版本
本文阅读的源码为 zepto1.2.0
GitBook
内部方法
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 方法隐藏。
系列文章
- 读Zepto源码之代码结构
- 读Zepto源码之内部方法
- 读Zepto源码之工具函数
- 读Zepto源码之神奇的$
- 读Zepto源码之集合操作
- 读Zepto源码之集合元素查找
- 读Zepto源码之操作DOM
- 读Zepto源码之样式操作
- 读Zepto源码之属性操作
- 读Zepto源码之Event模块
- 读Zepto源码之IE模块
- 读Zepto源码之Callbacks模块
- 读Zepto源码之Deferred模块
- 读Zepto源码之Ajax模块
- 读Zepto源码之Assets模块
- 读Zepto源码之Selector模块
- 读Zepto源码之Touch模块
- 读Zepto源码之Gesture模块
- 读Zepto源码之IOS3模块
- 读Zepto源码之Fx模块
参考
License
署名-非商业性使用-禁止演绎 4.0 国际 (CC BY-NC-ND 4.0)
最后，所有文章都会同步发送到微信公众号上，欢迎关注,欢迎提意见：
作者：对角另一面
网友评论