可见性：隐藏；后不透明度：0；答案

【问题标题】：visibility: hidden; AFTER opacity: 0;可见性：隐藏；后不透明度：0；
【发布时间】：2012-07-12 16:27:59
【问题描述】：

我有一个问题，我需要在 div 淡出后将其可见性设置为“隐藏”。到目前为止我的代码：

$('#layer')
    .stop(true, true)
    .animate({
        opacity:"0",
    },1000);

div覆盖了整个页面，所以设置不透明度并不是让div下的所有元素都可以再次点击的解决方案。

但是当我将代码更改为这样时：

$('#layer')
    .stop(true, true)
    .animate({
        opacity:"0",
        visibility: "hidden"
    },1000);

它已经淡出并且不可见，但仍然存在并且干扰了我在它下面的对象的可点击性。

语法有问题吗？

希望你能帮助我，非常感谢！

【问题讨论】：

【解决方案1】：

如果对象不应该存在，请改用.fadeOut(1000)。

【讨论】：

【解决方案2】：

在 CSS 中，visibility 和 display 之间有一个关键区别。可见性属性将使某些内容不可见，同时仍将其分解到页面的显示中。说visibility: hidden 基本上是在你的对象上披上隐形斗篷——其他东西仍然可以撞到它，但对象只是隐形的。

所以，您正在寻找 display: none，它将完全从模型中删除它

JK，我今天学到了一些东西！

【讨论】：

哎呀，没想到这一点。谢谢！但是我使用了Charmander的解决方案。
这是不正确的。 visibility: hidden 保留元素的位置和大小，可能会影响其周围元素的位置和大小，但不会干扰用户交互。 jsfiddle.net/eKwJA 这里的问题是visibility 与animate 的使用； visibility 无法设置动画。 jsfiddle.net/eKwJA/1