让 div 可见时触发操作的 jQuery 事件

小编典典

让 div 可见时触发操作的 jQuery 事件

all

我在我的网站中使用 jQuery，我想在某个 div 可见时触发某些操作。

是否可以将某种“不可见”事件处理程序附加到任意 div 并在 div 可见时运行某些代码？

我想要类似下面的伪代码：

$(function() {
  $('#contentDiv').isvisible(function() {
    alert("do something");
  });
});

在 contentDiv 实际可见之前，不应触发 alert(“do something”) 代码。

谢谢。

阅读 89

2022-04-02

共1个答案

小编典典

您始终可以添加到原始的.show()方法，这样您就不必在每次显示某些内容或需要它与旧代码一起使用时触发事件：

jQuery扩展：

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');
          };

      // you can trigger a before show if you want
      obj.trigger('beforeShow');

      // now use the old function to show the element passing the new callback
      _oldShow.apply(obj, [speed, newCallback]);
    });
  }
});

使用示例：

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

这有效地让您在执行原始 .show() 方法的正常行为的同时执行一些 beforeShow 和 afterShow 。

您还可以创建另一个方法，这样您就不必覆盖原始的 .show() 方法。

2022-04-02