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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • You Don't Need jQuery 前端发展很快,现代浏览器原生 API 已经足够好用。我们并不需要为了操...
    残丶梦阅读 5,446评论 0 2
  • jQuery 安装 把 jQuery 添加到您的网页 如需使用 jQuery,您需要下载 jQuery 库(会在下...
    Clover园阅读 2,394评论 0 0
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 4,914评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 5,222评论 0 2
  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 3,882评论 0 3