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

Question

It seems that most of the jakeery fadein / out and animate functions are based on a source element having a: none mapping as opposed to: hidden visibility.

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

Answer 1

Of course, start with visibility: hidden , and then do:

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

Adapted from a very similar question.

Answer 2

You can also try something like this ( Demo ) like fadeIn

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