How are .fadeIn() and .fadeOut() different from .show() and .hide()?


How are .fadeIn() and .fadeOut() different from .show() and .hide()?


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.