zepto实现fadeIn,fadeOut和fadeToggle

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);

你可能感兴趣的:(zepto实现fadeIn,fadeOut和fadeToggle)