Within CSS what is the difference between opacity:0 and display:none?

Question

I am working with the jQuery fadeIn/fadeOut method and confused by exactly what it is doing. The docs state that the method affects the opacity property of the element but display:none also work to hide an element and then fade it in. Are opacity:0 and display:none the same thing? I am seeing some really choppy animations using the methods and want to understand better whats going.

Answer 1

display: none lets the element disappear. Just like it isn't present. This means your layout may change.

opacity: 0 this one just makes your element invisible. It doesn't take any effect on your layout.

Answer 2

Both cases make the element invisible, but properties are different:

• opacity: 0 : invisible, but takes display space (affect the layout), and clickable
• display: none : invisible, doesn't take display space, and hence not clickable

Let me add a third one that is relevant in this context:

• visibility: hidden : invisible, takes display space, and not clickable

I have made an demo JSFiddle here: http://jsfiddle.net/sebastien_worms/tCbJD/

Answer 3

opacity:0 will still allow click, hover, and other mouse events on the element. It just won't be visible to the user.

display:none does what it implies—the element still exists but is completely not visible, as though it's width and height are 0.

Answer 4

display: none is like an object was removed from the page, opacity: 0 or visibility: none both keep the object on the page but just makes everything clear and leaves an empty space where it was. When it's opacity: 0 you can still click on it, but i don't think the same for visibility: none.

Answer 5

They will both make the text invisible, but display: none; will make it look like it never existed, where opacity:0.0; filter:alpha(opacity=0); will make it look like something is just missing.

For instance.

---

display: none;

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

will display as

This is text
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

will display as

This is text

This is more text

---

Make sense?

Answer 6

Opacity affects the transparency of the object.
Display affects how the object is rendered in the web browser.

For example:

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

this (to the user looking at it) will make it seem like "this text is here!" and "this text will be here" have a line break between them.

and this example:

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

this (to the user) will make it seem like the two visible lines are directly on top of each other with no space in between.

In JQuery, a fade in or fade out will change the Display from "none" to "block" and visa versa for the other, respectively. It will also animate the opacity from 0 to 1 smoothly within the allotted time, again visa versa for the other.

Answer 7

In addition to @arminb's Answer (I can't just comment on it) display:none will work in all (vaguely modern) browsers, opacity:0 has flaky support in older browsers (doesn't work in IE6, 7 or 8)

If you do need Opacity then something like this should work in all:

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

But that's messy. display:none is the cleanest solution which will work. visibility:hidden will also work in more browsers than opacity and achieves the same purpose (i.e. makes it invisible, but leaves it there)