46

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.

2
  • -1 jieren I guess you could have a look at some tutorials or the jQuery documentation before asking a question and possibly phrase your questions with stating your goals like erenon suggests
    – Michiel
    Jun 23, 2009 at 17:58
  • 4
    @Erenon: Based on the code example, it seems very likely that he wants to fade from nonvisible to visible.
    – jrista
    Jun 23, 2009 at 18:20

5 Answers 5

76

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.

1
  • 6
    This is just slightly incorrect when I tested on Google Chrome. The final opacity should be a 1. And to actually see the effect, you should use a duration. So, it should be something like: $('ul.load_details').css({opacity: 0, visibility: "visible"}).animate({opacity: 1},3000);
    – Volomike
    Mar 4, 2011 at 3:57
6

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/

5

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

2

This might help:

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

This is what worked for me (based on @Alan's 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 that's done before setting foo's visibility to be hidden. Otherwise, if set to hidden during the animate process then the fading out effect will not happen since it's hidden immediately.

Alternatively, you can use the 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" });
        }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.