美文网首页web前端
zepto实现fadeIn,fadeOut和fadeToggle

zepto实现fadeIn,fadeOut和fadeToggle

作者: Sylvie_9459 | 来源:发表于2018-02-06 11:31 被阅读0次

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

    Zepto.JS是移动端常用的JavaScript类库,它不仅实现了jQuery中大部分的功能,而且文件大小只有2...

  • jQuery - 效果(四)之 淡入淡出

    本文目录: fadeIn(); fadeOut(); fadeToggle(); fadeTo()。 fadeIn...

  • JQ 淡入淡出

    JQ fadeIn 淡入 fadeOut 淡出 fadeToggle 淡入淡出 $("button")....

  • zepto fadeIn/fadeOut 实现

    需要引入zepto的fx模块。 fadeIn设置两个参数: (动画时间,透明度)。 fadeOut在动画完成后,隐...

  • 六、jQuery动画

    1、显示和隐藏:hide、show、toggle 2、淡入淡出fadeIn、fadeOut、fadeToggle ...

  • jquery6

    jquery特殊效果: fadeIn() 淡入 fadeOut() 淡出 fadeToggle() 切换淡入...

  • 给元素绑定click事件

    fadeIn() 淡入 fadeOut() 淡出fadeToggle() 切换淡入淡出hide() 隐藏元素sho...

  • jQuery-淡入

    jquery特殊效果 fadeIn() 淡入 fadeOut() 淡出fadeToggle() 切换淡入淡出hid...

  • jQuery进阶

    1. jQuery特殊效果 fadeIn() 淡入 fadeOut() 淡出fadeToggle() 切换淡入淡出...

  • flutter动画FadeTransition

    今天要说的是flutter fadeIn 和fadeOut的动画的实现,其实就是AnimatedOpacity组件...

网友评论

    本文标题:zepto实现fadeIn,fadeOut和fadeToggle

    本文链接:https://www.haomeiwen.com/subject/nmfgzxtx.html