Question

Please can I confirm

$("#myElement").is(":visible"); 

is only supposed to be true if the div with id myElement is visible on the page.

I am finding that this is returning true regardless of whether myElement modified with:

$("#myElement").css("visibility","visible");

or

$("#myElement").css("visibility","hidden");

Where as:

$("#myElement").is(":visible")

returns false if myElement is modified with:

$("#myElement").css("display","none");

So in other words it may or may not be false if the element is not being displayed.

I have read and re-read the documentation. I must be missing something as I simply cannot pick out from the documentation why this is so. It does not say don’t use visibility hidden nor for that matter you must use display none.

So I am not sure that I am fully understanding the reason for this and what the pseudo selector :visible is acting on.

Note I have also had odd behaviour when attempting to use pseudo selector :animated.

Could anyone please explain what is happening here in particular in reference to :visible.

Answer 1

The first paragraph in documentation:

Elements are considered visible if they consume space in the document.
Visible elements have a width or height that is greater than zero.

Visibility: hidden still takes space on the page