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.

Answer 2

Maybe you are just looking to show or hide an element:

$('ul.load_details').show(); $('ul.load_details').hide(); 

Or do you want to show/hide element using animation (this doesn't make sense of course as it will not fade):

$('ul.load_details').animate({opacity:"show"}); $('ul.load_details').animate({opacity:"hide"}); 

Or do you want to really fade-in the element like this:

$('ul.load_details').animate({opacity:1}); $('ul.load_details').animate({opacity:0}); 

Maybe a nice tutorial will help you get up to speed with jQuery:

http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/