首页 > 上网技巧 > 电脑小技巧 > zepto实现fadeIn,fadeOut和fadeToggle

zepto实现fadeIn,fadeOut和fadeToggle

时间:2018-11-25 09:01 作者:QQ地带 我要评论

 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
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告