首頁 > web前端 > js教程 > 如何檢測 jQuery 中元素的可見性變化?

如何檢測 jQuery 中元素的可見性變化?

Susan Sarandon
發布: 2024-10-30 00:25:02
原創
396 人瀏覽過

How do you detect visibility changes for elements in 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板