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