setting visibility vs. hide/show

Question

What is the difference between element.css(\'visibility\', \'visible\') and element.show(). Also, what is the difference between element.css(\'vi

Answer 1

They are setting 2 different css properties: hide/show sets the display property to none, show removes this setting so that the default is used (e.g. 'block' for a div).

The difference as the other answers point out is that calling hide on an element means that it (and all its ancestors) will not take up any space. Where as setting visibility to hidden will effectively just make the elements completely transparent (but still take up space).

For answers to your edits:

1. Hide all ancestor (this is automatically done with both methods).
2. Use element.is(':visible') since this performs a check on both the visibility and display properties and to see if the height and width aren't 0, it also performs it recursively on the ancestors, whereas element.css('visibility') just tells you the visibility of the element.
3. Setting element.css('visibility', 'hidden') will do this - not calling element.hide().