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 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/