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');