如何檢測 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中文網其他相關文章！