Jquery 在CSS中，不透明度：0和显示：无之间有什么区别？

我正在使用jQuery fadeIn/fadeOut方法，并对它的具体操作感到困惑。文档声明该方法会影响元素的不透明度属性，但会显示：无也可以隐藏元素，然后淡入淡入。不透明度：0和显示：不相同吗？我看到一些使用这些方法制作的动画非常不稳定，我想更好地理解其中的含义。

display:none

让元素消失。就像它不存在一样。这意味着您的布局可能会更改

---

opacity:0

此选项只会使元素不可见。它不会对布局产生任何影响。

不透明度：0

仍允许在元素上单击、悬停和其他鼠标事件。它只是对用户不可见

---

display:none

表示元素仍然存在，但完全不可见，好像它的

宽度和
高度都是0。
不透明度会影响对象的透明度。

显示会影响对象在web浏览器中的渲染方式

例如：

 This text is here!
 <div style="opacity:0">
 This text will be invisible
 </div>
 this text will be here

此文本在这里！
此文本将不可见
本文将在这里

这（对用户来说）会让它看起来像“这个文本在这里！”和“这个文本将在这里”之间有一个换行符

这个例子：

This text is here!
<div style="display:none">
This text will be invisible
</div>
this text will be here

此文本在这里！
此文本将不可见
本文将在这里

这（对用户来说）将使两条可见的线看起来像是直接在彼此的顶部，中间没有空间

在JQuery中，淡入或淡出将分别将另一个的显示从“无”更改为“块”，反之亦然。它还将在分配的时间内将不透明度从0平滑地设置为1，另一个也将如此。
除了@arminb的答案（我不能仅对其进行评论）显示：在所有（模糊的现代）浏览器中都不起作用，不透明度：0在旧浏览器中具有不稳定的支持（在IE6、7或8中不起作用）

如果您确实需要不透明度，那么像这样的东西应该适用于所有：

.opaque {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
}

但那太乱了<代码>显示：无
是最干净的解决方案<代码>可见性：隐藏的

在比不透明的浏览器更多的浏览器中工作，并达到相同的目的（即使其不可见，但保留在那里）

显示：无

类似于从页面中删除了对象，

opacity:0

或

visibility:none

这两种方法都将对象保留在页面上，但只是将所有内容都清除，并在原来的位置留下一个空白。当不透明度为0时，您仍然可以单击它，但我认为可见性不一样：无。

它们都会使文本不可见，但

显示：无

将使它看起来像从未存在过一样，其中

不透明度：0.0；过滤器：alpha（不透明度=0）将使它看起来像是丢失了什么

比如说


显示：无

This is text
<div style="display: none;">This test is invisible</div>
This is more text

将显示为

这是文本

这是更多的文本


有意义吗？
这两种情况都使元素不可见，但属性不同：


不透明度：0
：不可见，但占用显示空间（影响布局），并且可点击
显示：无
：不可见，不占用显示空间，因此不可点击

让我补充第三个与此相关的问题：


可见性：隐藏
：不可见，占用显示空间，不可点击

我在这里做了一个演示：
。。。也许这并不正确，因为如果我理解正确，DOM与显示无关。谢谢你指出我的错误，我正在编辑这篇文章。
This is text
<div style="opacity:0.0; filter:alpha(opacity=0);">This test is invisible</div>
This is more text