如何检测 jQuery 中元素的可见性变化？

使用 jQuery 检测可见性变化

使用动态内容时，有必要根据特定元素的可见性执行操作。 jQuery 提供了一种方法来附加在 div 可见时触发的事件处理程序。

解决方案：

要实现此目的，您可以扩展现有的 jQuery .show()可见性变化前后的方法和触发事件。下面是一个自定义扩展代码片段：

jQuery(function($) {

  var _oldShow = $.fn.show;

  $.fn.show = function(speed, oldCallback) {
    return $(this).each(function() {
      var obj         = $(this),
          newCallback = function() {
            if ($.isFunction(oldCallback)) {
              oldCallback.apply(obj);
            }
            obj.trigger('afterShow');
          };

      // Trigger beforeShow event
      obj.trigger('beforeShow');

      // Call the original show method with the new callback
      _oldShow.apply(obj, [speed, newCallback]);
    });
  }
});

用法：

要使用扩展的 .show() 方法，您可以将事件绑定到 beforeShow 和 afterShow 触发器。例如：

jQuery(function($) {
  $('#test')
    .bind('beforeShow', function() {
      alert('beforeShow');
    }) 
    .bind('afterShow', function() {
      alert('afterShow');
    })
    .show(1000, function() {
      alert('in show callback');
    })
    .show();
});

此代码将在 ID 为 test 的 div 显示和隐藏时触发 beforeShow 和 afterShow 事件，允许您根据可见性变化执行自定义代码。

以上是如何检测 jQuery 中元素的可见性变化？的详细内容。更多信息请关注PHP中文网其他相关文章！