Geek Answers Handbook

How does jquery fadeIn work? Performing the same action with animation ()

I like the simple jQuery fadeIn() function, especially because it works without having to set transparency values ​​for the selector! Just set it to display:none , and using fadeIn() always works.

However, I am not using jQuery for my current project, but zepto.js. Zepto comes with animate() , not fadeIn() .

I wonder how I can create the same behavior with an animation function! What properties do I have for animation here?

 $('#selector').animate({ display: "block", opacity: 1 }, 500, 'ease-out')

Thank you in advance

+7
source share
3 answers
 (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(); he has to do the trick.

EDIT: The trader is right, adjusted the parts.

+8
source

The jQuery fadeIn function is just a shortcut to the jQuery animation function. All this leads to a change in opacity from 0 to 1 over a certain period of time by increasing the value of opacity.

 // 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 ); }; });
+3
source

you can try this. I did a small demo. you have to make it opaque to 0 and then make it display: block then animate the opacity.

check this script http://jsfiddle.net/dTRhQ/

However, this is done in jq, I hope you can find a suitable implementation in your infrastructure

-one
source

More articles:


All Articles