[解決済み] divが可視化されたときにアクションを起こすjQueryイベント

質問

私のサイトではjQueryを使っていますが、あるdivが表示されたときに特定のアクションを起こしたいのです。

任意の div に "isvisible" イベントハンドラのようなものを付けて、その div が可視化されたときに特定のコードを実行させることは可能でしょうか？

以下のような疑似コードのようなものが欲しいです。

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

alert("do something")コードは、contentDivが実際に表示されるまで起動しないようにする必要があります。

ありがとうございます。

解決方法は？

常にオリジナルに追加することができます .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() メソッドをオーバーライドする必要がないようにすることもできます。}