How can I get a div set to visibility:hidden to display using jQuery?

Question

I have a div set to visibility: hidden in the CSS that I want to display later. Here is the jQuery I have so far, which isn't working:

$(document).ready(function() {
    $('#start').click(function() {
        $(this).fadeOut(1000, function() {
             $('body').css('background-color','#999', function() {
                    $('.menu').fadeTo('slow',1);
             });
        });
    });
});

The following should happen in order:

1. User clicks '#start' and '#start' fades. (This happens.)
2. The background color of the page turns from its original color to gray. (This happens.)
3. The div '.menu' should fade in. (This does not happen.)

What am I doing wrong? If it makes a difference, '.menu' is filled only with a bunch of child divs.

Answer 1

fadeTo changes opacity property of an element, you should use opacity instead of the visibility or set the display property of the element to none and use fadeIn method.

Also note that css doesn't accept 3 parameters.

.menu { display: none }

$(document).ready(function() {
    $('#start').click(function() {
        $(this).fadeOut(1000, function() {
             $('body').css('background-color','#999');
             $('.menu').fadeIn('slow');
        });
    });
});

However, if you want to change the visibility property, you can use css method:

$('.menu').css('visibility', 'visible');

Answer 2

http://api.jquery.com/css/ .css() doesn't have a 3rd argument, it either accepts 2 arguments of a css property and value or an object of css propertery-value pairs.

Also as "undefined" pointed out, there you have to watch out for opacity, visibility and display. Each can make an object invisible but behave differently in jquery animations.

.fadeTo() only changes the object's opacity. .fadeIn() changes an object with display:none to display:block then changes the opacity.

If you have an object which has visibility:hidden you actually have to first set the visibility to visible and the opacity to 0 then use fadeTo().

I'd recommend (like "undefined" wrote) to use display:none instead of visibility:hidden and use fadeIn() instead of fadeTo()

$('body').css('background-color','#999');
$('.menu').fadeIn('slow',1);