Zepto.JS是移动端常用的JavaScript类库,它不仅实现了jQuery中大部分的功能,而且文件大小只有20几kb,在移动端特别适合替代jQuery。但是Zepto.JS本身没有提供动画方法,需要手动加入zepto.animate.fx.js模块,实现fadeIn,fadeOut,fadeToggle方法。
/* zepto.animate.alias.js */
(function ($) {
$.extend($.fn, {
fadeIn: function (speed, complete) {
if (typeof(speed) === 'undefined'){
speed = 380;
}
$(this).css({ display: 'block', opacity: 0 })
.animate({ opacity: 1 }, speed, function () { complete && typeof(complete) === 'function' && complete(); });
return this;
},
fadeOut: function (speed, complete) {
if (typeof(speed) === 'undefined') {
speed = 400;
}
$(this).css({ opacity: 1 })
.animate({ opacity: 0 }, speed, function () {
$(this).css('display', 'none'); complete && typeof(complete) === 'function' && complete();
});
return this;
},
fadeToggle: function (speed, complete) {
return this.each(function () {
var el = $(this);
el[(el.css('opacity') === 0 || el.css('display') === 'none') ? 'fadeIn' : 'fadeOut'](speed, complete);
})
}
})
})(Zepto);