how does jquery fadeIn work? Doing the same with animate()

Question

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

The `.fadeIn()` function likely just calls the jQuery `.animate()` function, so try looking for it in the [jQuery code](http://code.jquery.com/jquery-1.7.2.js). — Anthony Grist, Aug 02 '12 at 12:39

Sem · Accepted Answer · 2013-08-12T07:09:22.710

9

(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.

edited Aug 12 '13 at 07:09

answered Aug 02 '12 at 12:48

Sem

4,477
4
33
52

1

Your solution looks great, but according to what I've read about Javascript, you should rather use `typeof(ms) === 'undefined'`, not `ms == undefined` as there is no such keyword like `undefined` in JS and this (in some certain situations) can even be a variable with a value! – trejder Aug 09 '13 at 16:16
1

And -- of course! -- `display: 'block',`, not `display: block,`, as `block` is an undefined (sic!) variable here! – trejder Aug 09 '13 at 16:22

score 3 · Answer 2 · answered Aug 02 '12 at 12:43

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 );
    };
});

score -1 · Answer 3 · answered Aug 02 '12 at 13:17

you can try this. I made a little demo. you have to make it's opacity 0, then make it display:block then animate the opacity.

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

However, that is done in jq, I hope you can find suitable implementation in your framework

how does jquery fadeIn work? Doing the same with animate()

3 Answers3