如何使用 jQuery 将 div 设置为可见性：隐藏以显示？答案

【问题标题】：How can I get a div set to visibility:hidden to display using jQuery?如何使用 jQuery 将 div 设置为可见性：隐藏以显示？
【发布时间】：2013-02-02 06:13:30
【问题描述】：

我有一个 div 设置为可见性：隐藏在我想稍后显示的 CSS 中。这是我到目前为止的 jQuery，它不起作用：

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

以下应该按顺序发生：

用户单击“#start”和“#start”消失。（会发生这种情况。）
页面的背景颜色从原来的颜色变为灰色。（会发生这种情况。）
div '.menu' 应该淡入。（这不会发生。）

我做错了什么？如果有区别，“.menu”只会填充一堆子 div。

【问题讨论】：

标签： jquery css animation html fadeto

【解决方案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');

【讨论】：

【解决方案2】：

http://api.jquery.com/css/ .css() 没有第三个参数，它要么接受一个 css 属性和值的 2 个参数，要么接受一个 css 属性-值对的对象。

正如“未定义”所指出的，您必须注意不透明度、可见性和显示。每个都可以使对象不可见，但在 jquery 动画中表现不同。

.fadeTo() 只改变对象的不透明度。 .fadeIn() 将带有display:none 的对象更改为display:block，然后更改不透明度。

如果您有一个具有visibility:hidden 的对象，您实际上必须首先将可见性设置为visible 并将不透明度设置为0，然后使用fadeTo()。

我建议（如“未定义”写道）使用 display:none 而不是 visibility:hidden 并使用 fadeIn() 而不是 fadeTo()

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

【讨论】：