jQuery fade in goes way faster than fade out?

Question

I have an image which I'd like to fade in and out.

$("#img").animate({
    opacity: 0
}, 1000 );


$("#img").animate({
    opacity: 100
}, 1000 );

Even though the timer is set to 1000 milleseconds for both, fading in happens much faster. Why is this happening?

Live demo: http://jsfiddle.net/G3KtZ/

Answer 1

For your "fade in" animate function, you are setting the opacity to 100. It should simply be set to 1. Opacity in CSS is from 0 to 1, and therefore its the same in JavaScript (since you are using Javascript to modify the CSS).

So here's what happens. jQuery animates the opacity from 0 to 100 over the course of 1000ms. But as soon as the opacity hits 1 (after only 10ms), the opacity is full.

See here: http://jsfiddle.net/G3KtZ/3/