Zepto.JS实现fadeIn/fadeOut/fadeToggle方法
2016-12-21
JS 已有960人围观

    Zepto.JS是移动端常用的JavaScript类库,它实现了jQuery中大部分的功能,同时文件大小只有十几K,在移动端特别适合替代jQuery。但是Zepto.JS本身没有提供动画方法,需要手动加入zepto.animate.fx.js模块,该模块提供了animate方法,不过也就只提供了animate方法。今天为了替换一个项目中的jQuery,自己实现了fadeIn,fadeOut,fadeToggle等方法。

    代码如下:

/**
 * zepto.animate.alias.js
 */
(function ($) {
    $.extend($.fn, {
        fadeIn: function (speed, easing, complete) {
            if (typeof(speed) === 'undefined') speed = 400;
            if (typeof(easing) === 'undefined') {
                easing = 'swing';
            } else if (typeof(easing) === 'function') {
                if (typeof(complete) === 'undefined') complete = easing;
                easing = 'swing';
            }

            $(this).css({
                display: 'block',
                opacity: 0
            }).animate({
                opacity: 1
            }, speed, easing, function () {
                // complete callback
                complete && typeof(complete) === 'function' && complete();
            });

            return this;
        },
        fadeOut: function (speed, easing, complete) {
            if (typeof(speed) === 'undefined') speed = 400;
            if (typeof(easing) === 'undefined') {
                easing = 'swing';
            } else if (typeof(easing) === 'function') {
                if (typeof(complete) === 'undefined') complete = easing;
                easing = 'swing';
            }

            $(this).css({
                opacity: 1
            }).animate({
                opacity: 0
            }, speed, easing, function () {
                $(this).css('display', 'none');
                // complete callback
                complete && typeof(complete) === 'function' && complete();
            });

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


Over!

本文地址:http://xianglong.me/article/implement-fadein-fadeout-fadetoggle-function-in-zeptojs/

特别声明:本站文章,如非注明,皆为降龙原创。转载需注明本文链接并保证链接可用。