jQueryで~の要素に~クラスが付与されたら発動する機能を作成してみた。

まずはaddClassイベントが発動したときにカスタムイベントが発動するようにtriggerを設置します。

$.fn.addClass_org = $.fn.addClass; // addClassイベントを保存
$.fn.addClass = function() {
  this.trigger('AddedClass', arguments); // カスタムイベントを設置
  return $.fn.addClass_org.apply(this, arguments); // 本来のaddClassを返す
};

これでaddClassが実行されるたびにAddedClassが発動するようになります。
argumentsには付与されたクラス名などの情報が入っているので、引数で渡してあげます。

これをもとに「~の要素に~クラスが付与されたら発動する」といった機能を作成します。

$.fn.addedClass = function(className, callback){
  var
    _that = this,
    _callback = callback || function(){};

  this.on('AddedClass', function(){
    var _arguments = arguments;
    setTimeout(function(){
      if(
        _arguments[1] === className &&
        _that.hasClass(className)
      ){
        _callback();
      }
    }, 0);
  });
}

setTimeout 0 はaddClassの処理が終わるまで待機するためにいれています。

そして使い方はこんな感じです。

$('.hoge').addedClass('active', function(){
  console.log('OK');
});

.hoge要素にactiveというクラスが付いたら発動されます。