使div可见时的jQuery事件触发动作

Question

我在网站上使用jQuery，当某个div可见时，我想触发某些动作。

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

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

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

在真正使contentDiv可见之前，将不会触发alert（“做某事”）代码。

谢谢。

Answer 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（）方法。