Visibility option in 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

This might help:

$(".pane .delete").click(function(){
 $(this).parents(".pane").animate({ opacity: 'hide' }, "slow");
});

Answer 2

You can't animate visibility. Either something is visible, or it's not (event 1% opaque items are 'visible'). It's much like half-existing - doesn't make sense. You're likely better off animating the opacity (via .fadeTo() etc).

Answer 3

you can use after animate func ,css func

animate().css({visibility: "visible"})

Answer 4

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

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

Because you set the opacity to 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.

Answer 5

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/