Extend Zepto with fadeIn and fadeOut effects

Zepto.js is great alternative to jQuery. With greatly reduced (in compare it jQuery) source code base, it still offers about 80-90% of key jQuery functionalities. Unfortunately to me, among these missing 10-20% there were some animations and some nifty fadeIn and fadeOut effects. Had to find some solution to this problem.

Here’s a solution:

(function($)
{    
    $.extend($.fn,
    {
        fadeIn: function(ms)
        {
            if(typeof(ms) === 'undefined') ms = 500;

            $(this).css(
            {
                display: 'block',
                opacity: 0
            }).animate({
                opacity: 1
            }, ms);
            
            return this;
        },
        
        fadeOut: function(ms)
        {
            if(typeof(ms) === 'undefined') ms = 500;

            $(this).css(
            {
                opacity: 1
            }).animate({
                opacity: 0
            }, ms, 'linear', function()
            {
                $(this).css('display', 'none');
            });
            
            return this;
        }
    })
})(Zepto)

It is based on this Stack Overflow answer, a little bit fixed by me and extended with fadeOut effect.

Leave a Reply