在前端开发中，有时需要在元素显示出来之后再进行一些操作，比如获取某个 DOM 元素的尺寸、位置等信息。jQuery 提供了一个方便的方法用于判断元素是否可见：$.fn.is(':visible')。
:visible 选择器
:visible 是 jQuery 中的一个伪类选择器，用于匹配可见的元素。可见的元素包括：
- 宽度和高度都大于 0；
- display 属性不是 none；
- visibility 属性不是 hidden；
- opacity 不是 0；
如果元素的任意一个祖先元素隐藏或者元素自身的样式设置为 display:none 、visibility:hidden 或 opacity:0，那么该元素就被认为是不可见的。
判断元素是否可见
可以使用 .is(':visible') 方法检查元素是否可见。这个方法返回一个布尔值，如果元素在页面中可见则返回 true，否则返回 false。
示例代码：
-- -------------------------------- - -- ---- - ---- - -- ----- -
上面的代码会根据 #myElement 元素是否可见来执行不同的操作。
监听元素可见性变化
有时候需要监听元素可见性的变化，比如在某个元素显示出来之后执行一些操作。可以使用 jQuery.fn.isVisible 方法来实现。
示例代码：
-------------- - ---------- -
--- ---- - --------------------------------
------ ------------ --- - -- ----------- --- ---
--
--- ---------- - ----------------
--- --------- - -----------------------
-- ----------- -
-- ----
- ---- -
-- -----
-
-- ---------
------------------------------ ---------- -
-- ------------------------ -
-- --------
- ---- -
-- ---------
-
---上面的代码中，$.fn.isVisible 是自定义的一个方法，用于判断元素是否可见。在监听元素可见性变化时，首先获取元素当前的可见性状态，然后添加一个 transitionend 事件监听器，当元素的可见性发生变化时，检查元素的可见性状态并执行对应的操作。
结论
可以使用 :visible 选择器来判断元素是否可见，也可以自定义方法来监听元素可见性的变化。在实际开发中，需要根据具体需求选择合适的方法来操作元素。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/26008