Fading element visibility using jQuery

Question

I'm having trouble finding the visibility parameter for jQuery.

Basically ... the code below does nothing.

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

There is nothing wrong with the animation code (I replaced the visibility with fontSize and everything was fine. I just can't find the correct equivalent parameter name for "visibility" in css.

Answer 1

You can set the opacity to 0.0 (ie, “invisible”) and visibility to visible (to make the opacity relevant), and then animate the opacity from 0.0 to 1.0 (to fade it):

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

Since you set the opacity to 0.0, it is invisible even though it is set to "visible." An opacity animation should give you the attenuation you're looking for.

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

EDIT: Wolomike is correct. CSS, of course, indicates that opacity takes a value from 0.0 to 1.0, and not from 0 to 100. Fixed.

Answer 2

Maybe you just want to show or hide the element:

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

Or do you want to show / hide the element using animation (this does not make sense, since it will not disappear):

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

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

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

Maybe a good tutorial will help you speed up work with jQuery:

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

Answer 3

You cannot animate visibility . Either something is visible or not (the event of 1% of opaque elements is “visible”). It seems to be half existing - it makes no sense. You are probably better off not animating opacity (via .fadeTo (), etc.).

Answer 4

This can help:

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

Answer 5

This is what worked for me (based on @Alan answer )

  var foo = $('ul.load_details'); // or whatever var duration = "slow"; // or whatever if (foo.css('visibility') == 'visible') { foo.css({ opacity: 1 }).animate({ opacity: 0 }, duration, function () { foo.css({ visibility: "hidden" }); }); } else { foo.css({ opacity: 0 }).animate({ opacity: 1 }, duration).css({ visibility: "visible" }); } 

When the foo element is visible, then slowly change the opacity to zero (via animate ), and then wait until this is done before the visibility of the foo visibility is displayed. Otherwise, if it is set to hidden during the animation process, the fading effect will not occur, since it is immediately hidden.

Alternatively, you can use a simpler, cleaner fadeTo () :

  var foo = $('ul.load_details'); // or whatever var duration = "slow"; // or whatever if (foo.css('visibility') == 'visible') { foo.fadeTo(duration, 0, function () { foo.css({ visibility: "hidden" }); }); } else { foo.fadeTo(duration, 1).css({ visibility: "visible" }); }