jquery - 如何将 div 设置为可见性 :hidden to display using jQuery?

Question

我有一个 div 设置为 visibility: hidden 在我想稍后显示的 CSS 中。这是我目前使用的 jQuery，它无法正常工作:

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

以下应该按顺序发生:

1. 用户点击“#start”，然后“#start”淡出。 (这种情况发生了。)
2. 页面的背景颜色从原来的颜色变为灰色。 (这种情况发生了。)
3. div“.menu”应该淡入。(这不会发生。)

我做错了什么？如果它有所作为，'.menu' 只填充了一堆子 div。

Answer 1

fadeTo 改变元素的 opacity 属性，你应该使用 opacity 而不是 visibility 或者设置将元素的 display 属性设置为 none 并使用 fadeIn 方法。

另请注意，css 不接受 3 个参数。

.menu { display: none }

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

但是，如果你想改变visibility属性，你可以使用css方法:

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