如果 div 被隐藏，如何使用 fadeIn()答案

【问题标题】：How to use fadeIn() if the div is hidden如果 div 被隐藏，如何使用 fadeIn()
【发布时间】：2013-02-02 22:49:08
【问题描述】：

我需要能够平滑淡入默认隐藏的div。

我正在使用此代码：

$(".grey_cover").css({
    visibility: "visible"
}).fadeIn(2000, function () {
    $(".popup").css({
        visibility: "visible"
    }).fadeIn(3000);
});

Div 的grey_cover 和popup 默认有visibility:hidden。此代码正在运行，但 div 的弹出速度非常快..这毫秒没有做任何事情..我尝试使用 slow 选项而不是 milliseconds 并且仍然存在相同的行为。

我想慢慢淡化它们。

【问题讨论】：

试试这个answer

标签： javascript jquery html css fadein

【解决方案1】：

您不应为此使用visibility，而应使用display: none;。然后删除 jQuery CSS 部分。比你应该没问题。

【讨论】：

谢谢..这解决了问题。你能给我一些解释吗？我真的很想知道为什么这两个不做同样的事情？
CSS 属性visibility 和display 不是一回事。 visibility 属性确定是否呈现元素的内容。 display 属性确定是否以及如何使用它来确定页面布局。

【解决方案2】：

使用这个

css:

.grey_cover {
   visibility: visible;
   display: none;
}

.pop_up {
   visibility: visible;
   display: none;
}

javascript：

 $(".grey_cover").fadeIn(2000, function() { 
     $(".popup").fadeIn(3000);
 });

【讨论】：

【解决方案3】：

如果您无法更改 CSS 规则。您可以将opacity 设置为0，同时将visibility 设置为visible。那么.animate()就可以处理动画了。

$(".grey_cover").css({
    opacity: 0,
    visibility: "visible"
}).animate({
    opacity: 1
}, 2000, function() {
    $(".popup").css({
        opacity: 0,
        visibility: "visible"
    }).animate({
        opacity: 1
    }, 3000);
});

话虽如此，在大多数情况下使用display 更好。

【讨论】：

【解决方案4】：

在淡入之前让它们可见 - 你不需要让它们可见，fadeIn 会处理。

【讨论】：