JQuery: Check whether an Element is Hidden from the user

Question

How to check whether a particular element is hidden from the user? In my code, under certain conditions, this code will be called:

$("#VersionSelectField").hide('fast');

So I have to make sure that if $("#VersionSelectField") is hidden, then I would not have to validate the value inside it when I submit the form ( I use JQuery Validate library for this purpose).

Any ideas?

Answer 1

$("#VersionSelectField").is(':hidden');

Answer 2

This works for me:

$("#VersionSelectField").css("display") == "none";

Answer 3

You may use the callback of the hide() method. For example:

$("#VersionSelectField").hide('fast', function() {
    GlobalVersionSelectFieldHidden = true;
});

Above is only one method to make use of that, basically the callback will only fires when the animation finished (ie, totally hidden). Of course polluting the global variable scope is very naughty but just a quick example.

Alternatively, checking whether display is "none" like Mark suggest also works, since the JQ effect will totally hide things using that particular css property.

Answer 4

Try $("#versionselectfield[display='none']").length > 0.