I love the simple jQuery fadeIn()
function, especially because it works without having to set any opacity values to the selector! Just setting it to display:none
and using fadeIn()
always works.
However I'm not using jQuery for my current project but zepto.js. Zepto only comes with animate()
and not with fadeIn()
.
I wonder how I can create the same behaviour with the animate function! What properties do I have to animate here?
$('#selector').animate({
display: "block",
opacity: 1
}, 500, 'ease-out')
Thank you in advance
(function($){
$.extend($.fn, {
fadeIn: function(ms){
if(typeof(ms) === 'undefined'){
ms = 250;
}
$(this).css({
display: 'block',
opacity:0
}).animate({
opacity: 1
}, ms);
return this;
}
})
})(Zepto)
If Zepto works like jQuery $('.example').fadeIn();
should do the trick.
EDIT: Trejder is right, adjusted the parts.
The jQuery fadeIn function is just a shortcut to the jQuery animate function. All it does it change the opacity from 0 to 1 over a period of time by incrementing the opacity value.
// Generate shortcuts for custom animations
jQuery.each({
slideDown: genFx( "show", 1 ),
slideUp: genFx( "hide", 1 ),
slideToggle: genFx( "toggle", 1 ),
fadeIn: { opacity: "show" },
fadeOut: { opacity: "hide" },
fadeToggle: { opacity: "toggle" }
}, function( name, props ) {
jQuery.fn[ name ] = function( speed, easing, callback ) {
return this.animate( props, speed, easing, callback );
};
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With