Simple fadeIn and visibility in jQuery

Question

I\'m trying to change the css property visibility of a div to visiblewith a jQuery .fadeIn()transition.

Here is my code :

Answer 1

You cannot animate visibility. fadein is keyed off display:none;, so that should be #test's initial state via CSS. If you need to keep the layout, you can try wrapping test in a div that specifies the height and/or width you need.

Answer 2

Actually, I liked davidaam's answer. I would make a slight modification:

    $('#test').css('visibility','visible').hide().fadeIn("slow");

Answer 3

You could also use CSS opacity combined with JQuery's fadeIn to achieve the same thing.

Instead of using visibility in your CSS, use opacity: 0; Then use jQuery FadeTo to increase the opacity to 100%:

$('#test').fadeTo('slow', 1);

This will preserve positioning like visibility does, however, it's important to note that opacity: 0 responds to events such as click and keypress as well as participating in the taborder. Additionally, I've also read that a responsible use of visibility: hidden rather than display: none is better for SEO, but I'm not sure how this applies to opacity: 0.

JSFIDDLE: http://jsfiddle.net/np6r7/15/