Question
How are .fadeIn()
and .fadeOut()
different from .show()
and .hide()
?
Answer
All of them can take a transition time, which means the amount of time it will take the element to fade out/hide or fade in/show, but if we play with this four methods under the same amount of time, we will notice a curious phenomenon, while .fadeOut()
starts disappearing or dissolving, .hide()
seems to be getting smaller, the opposite effect can be observed between .fadeIn()
and .show()
:
The reason behind this behavior is that .fadeIn()
and .fadeOut()
only affect the opacity of the element but even though not visible it is still displayed, in contrast .hide()
and .show()
affect the height, margin, width, and opacity of the element if we give the method a transition time (ie.; .hide(4000)
) that will end on the element’s display
property to be none
and thus losing its properties from the page.