6

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?

phpmysqlguy
  • 310
  • 3
  • 10
  • 1
    @StuartKershaw, that question has no relevance at all that I can see. – Liam Nov 06 '13 at 16:39
  • 1
    possible duplicate of [jquery fade element does not show elements styled 'visibility: hidden'](http://stackoverflow.com/questions/2435751/jquery-fade-element-does-not-show-elements-styled-visibility-hidden) – j08691 Nov 06 '13 at 16:41

2 Answers2

8

Sure, start with visibility: hidden then do:

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

Borrowed from a very similar question.

Community
  • 1
  • 1
hiattp
  • 2,326
  • 1
  • 20
  • 23
8

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

$('div').css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, 'slow');
The Alpha
  • 143,660
  • 29
  • 287
  • 307