What does JQuery do to a <div> when you set it to hide?

Question

I was wondering what JQuery actually does to a <div> when you set it to hide?

Does it simply set it's CSS display style to none?

The reason i ask, i wanted to set a <div> to be hidden initially (by setting the property manually, not by calling .hide) then use .show() to bring it into view when needed.

Cheers, Kohan

Answer 1

It sets it to display: none, though some extra work comes on, that's the overall effect.

If you have a <div style="display: none;"> then .show() will show it :)

Here's a quick demo showing this

If you're more curious as to exactly what happens, you can always look directly at the source :) The .hide() function inner-workings can be seen here: http://github.com/jquery/jquery/blob/master/src/effects.js#L59

The main difference between .hide()/.show() and .css('display':'whatever') for example, is that .show() restores the previous display value (or clears it so it's default if it was never hidden with .hide()), instead of just picking a new one :)

Answer 2

.hide() applies display:none to the element's style.

Answer 3

Does it simply set it's CSS display style to none?

Yes, that's what it does eg it sets:

display: none;

Answer 4

According to the JQuery API with speed set to none, yes

Otherwise when it will do the following (also from the API documentation):

When a duration is provided, .hide() becomes an animation method. 
The .hide() method animates the width, height, and opacity of the 
matched elements simultaneously. When these properties reach 0,
the display style property is set to none to ensure that the element
no longer affects the layout of the page.