jQuery Easing callback関数が動作しない #jQuery

jQuery Easing

jQueryではanimateという関数を使ってアニメーション効果を得ることができます。
しかし、通常、利用できるアニメーションの種類はlinerとswingの2つのみです。
そこで多くのアニメーションを実現させるためのプラグインがjQuery Easing Pluginです。
今回、このプラグインの動作を試していたところ、animate関数で渡すcallbackが正常に動作しなかったので、メモる。

jQuery Easing 実装方法

animete(params, option)
animate(params, [duration], [easing], [callback])

animate 日本語リファレンス

本題

日本語リファレンス1, 2を見ながら、ロールオーバーで書いてみました。
２つのコードで、1 の方は、連続動作させるとcallback関数が処理されず･･･。callback関数が呼ばれるタイミングが遅いために関数が呼ばれないまま、次の処理に移ってしまってる？ようです。一方 2 は、正常に動作します。いろいろ調べたのですが、原因不明。納得できん。。。

1.コード（抜粋）

サンプル：http://dl.dropbox.com/u/9435465/rollover_test1/t1.html

   $('.boxgrid').hover(
   function(){
      $(".cover").stop().animate(
         {left: "0px"}, {duration: 150,easing: "easeOutCubic"}
      );
   }, function() {
      $(this).find(".cover").stop().animate(
         {left: "450px"}, {duration: 150, easing: "easeOutCubic", complete: function() { $(this).remove(); }}
      )
   });

2.コード（抜粋）

サンプル：http://dl.dropbox.com/u/9435465/rollover_test1/t2.html

   $('.boxgrid').hover(
   function(){
      $(this).find(".cover").stop().animate(
            {left: "0px"}, 150, "easeOutCubic");
   }, function() {
      $(this).find(".cover").stop().animate(
            {left: "450px"}, 150, "easeOutCubic", function() { $(this).remove(); }
      );
   });