Difference between hidden and not visible in jQuery

Question

I know that both jQuery selectors match elements that are not visible (width or height equal to 0, display: none, parent with display: none), and I believe it is implied they should yield the same result in the docs.

For readability reasons, I would rather use :hidden but I want to know:

• Are there any potential pitfalls that I should consider?
• Will I always get the exact same result?
• Which option has better performance?

Answer 1

During animations that hide an element, the element is considered to be visible until the end of the animation. Elements that are not in a document are not considered to be visible; jQuery does not have a way to know if they will be visible when appended to a document since it depends on the applicable styles.