バウンスポジションの問題を伴うJQueryスライドエフェクト

Question

マウスオーバーでdivを親divの下からスライドさせ、スライドが完了するとバウンスするエフェクトを作成しようとしています。

$("#testDiv").hover(function() { 
    $(".box").stop().slideDown("slow", function() { 
     $(".box").effect("bounce", { 
      times: 3, distance: 3 
     }, 250); 
    }); 

    }, function() { 
     $(".box").stop().slideUp(); 
}); 

私のコードのバイオリンは、これまでにここにある：

http://jsfiddle.net/7TZ3E/

時々動作しているようですが、それはさまざまな方法で台無し。表示を停止するか、親divの先頭にジャンプするか、サイズが徐々に小さくなります。

私が探している効果を生み出す助けとなりました。

Answer 1

が、これはあなたに

$("#testDiv").hover(function(e) { 
    $(".box").stop(true,true).animate({height: ['toggle', 'easeOutBounce']}, 'medium'); 
}, 
function(e) { 
    $(".box").stop(true,true).animate({height: 'toggle'}); 

});​ 

Hereを助けるかもしれませフィドルです。