jQuery.fn.extendで$()を拡張する

jQueryのセレクタで指定した要素をfadeOutで消して、消えた直後にfadeInで再度表示するようなアニメーションの実装を考えます。
これは、下記のようなコードで実現できます。

$("#hoge").fadeOut("slow", function(){
    $("#hoge").fadeIn("slow");
});

このようなコードを何回も書くのは面倒なので、jQueryのメソッドfadeOutInとして定義してみます。
$()にメソッドを定義するには、jQuery.fn.extend(object)を利用します。objectのプロパティに定義したメソッドが$()オブジェクトから呼び出せます。定義したメソッド内では、thisは$()オブジェクトを参照しています。コードにしてみます。

jQuery.fn.extend({
  fadeOutIn:function(){
    return this.fadeOut("slow", function(){
        this.fadeIn("slow");
    });
  }
});

$("#fuga").fadeOutIn();

駄目でした。fadeOutしたあとにfadeInが呼び出されません。これはfadeOut()のcallback内では、thisは$()ではないからです。
そこで、thisへの参照をthatで持っておき、callbackからはthat経由で$()を参照するようにします。

jQuery.fn.extend({
  fadeOutIn:function(){
    var that = this;
    return this.fadeOut("slow", function(){
    that.fadeIn("slow");
    });
  }
});

$("#fuga").fadeOutIn();

上記コードで、$().fadeOutIn()メソッドが使えるようになりました。