Want to use jquery fade in effects, but want to use visibility:hidden initially

Question

It seems most of the jquery fadein/out and animate functions are based on the initial element having display:none as opposed to visibility:hidden.

What if I want the initial element to take space up on the page (i.e. use visibility:hidden), but then use a fade in/out or slide effect? Is there an easy way to do this?

Answer 1

Sure, start with visibility: hidden then do:

$('.your-element').css('visibility','visible').hide().fadeIn();

Borrowed from a very similar question.

Answer 2

You may also try something like this (Demo) as fadeIn

$('div').css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, 'slow');