javascript - Fading visibility of element using jQuery

Question

I'm having some trouble with finding the visibility param for JQuery.

Basically... the code below does nothing.

$('ul.load_details').animate({
    visibility: "visible"
    },1000);

There's nothing wrong with the animate code (I replaced visibility with fontSize and it was fine. I just can't seem to find the correct param name equivalent for "visibility" in css.

Answer 1

You could set the opacity to 0.0 (i.e. "invisible") and visibility to visible (to make the opacity relevant), then animate the opacity from 0.0 to 1.0 (to fade it in):

$('ul.load_details').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0});

Because you set the opacity to 0.0, it's invisible despite being set to "visible". The opacity animation should give you the fade-in you're looking for.

Or, of course, you could use the .show() or .fadeTo() animations.

EDIT: Volomike is correct. CSS of course specifies that opacity takes a value between 0.0 and 1.0, not between 0 and 100. Fixed.