我正在使用jQuery fadeIn / fadeOut方法，并且确切地知道它在做什么。文档声明该方法影响元素的不透明度属性，但显示：none也可以隐藏元素然后淡入它。是不透明度：0和显示：无同样的事情？我看到使用这些方法的一些非常不稳定的动画，并希望了解更好的内容。
答案 0 :(得分：11)
display: none让元素消失。就像它不存在一样。这意味着您的布局可能会发生变化。
opacity: 0这个只会使你的元素不可见。它不会对您的布局产生任何影响。
答案 1 :(得分：6)
两种情况都会使元素不可见，但属性不同：
opacity: 0：隐藏，但占用显示空间（影响布局），可点击 display: none：隐藏，不占用展示空间，因此无法点击 让我添加第三个与此相关的内容：
visibility: hidden：隐藏，占用展示空间，无法点击 我在这里制作了一个演示JSFiddle：http://jsfiddle.net/sebastien_worms/tCbJD/
答案 2 :(得分：2)
opacity:0仍然允许在元素上单击，悬停和其他鼠标事件。它只是用户不可见。
display:none执行它所暗示的内容 - 该元素仍然存在但完全不可见，好像width和height为0。
答案 3 :(得分：2)
display: none就像是从页面中删除了一个对象，opacity: 0或visibility: none都将对象保留在页面上，但只是让所有内容都清晰，并留下一个空白的空间。当它的不透明度：0你仍然可以点击它，但我认为可见性不同：没有。
答案 4 :(得分：2)
它们都会使文本不可见，但display: none;会使它看起来像从未存在过，opacity:0.0; filter:alpha(opacity=0);会让它看起来像是缺少某些东西。
例如。
display: none;
This is text
<div style="display: none;">This test is invisible</div>
This is more text
将显示为
这是文字
这是更多文字
opacity:0.0; filter:alpha(opacity=0);
This is text
<div style="opacity:0.0; filter:alpha(opacity=0);">This test is invisible</div>
This is more text
将显示为
这是文字
这是更多文字
有意义吗？
答案 5 :(得分：1)
不透明度会影响对象的透明度 显示会影响对象在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，对另一个则反之亦然。
答案 6 :(得分：1)
除了@ arminb的答案（我不能只评论它）显示：none将在所有（模糊的现代）浏览器中工作，不透明度：0在旧版浏览器中具有不稳定的支持（在IE6中不起作用，7或8）
如果你确实需要Opacity，那么这样的事情应该适用于所有人：
.opaque {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
但那太乱了。 display:none是最干净的解决方案。 visibility:hidden也可以在比不透明度更多的浏览器中工作，并实现相同的目的（即使其不可见，但将其留在那里）