Menu
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.
954
As you can see, whenever you need the element to disappear completely and not take up any space, you should use display: none; . If you want the element to have a transition or fade-in effect when becoming visible, you should use opacity: 0; .
The opacity CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.
visibility:hidden hides the element, but it still takes up space in the layout. display:none removes the element from the document. It does not take up any space.
display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them.
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.
124
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/
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
