Fading visibility of element using jQuery

Viewed 72925

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.

5 Answers

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.

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/

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).

This might help:

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