jquery - Jquery でアニメーション効果を停止する方法 (停止方法)

Question

私は Jquery を初めて使用し、アニメーションを実行しようとしていますが、アニメーションを停止する方法がわかりません。

div に積み上げられた 3 つのアンカー タグで高さや幅が等しくない 3 つの画像があります。

私はスクリプトを作成しました。画像を mouseenter() すると、画像の幅は幅 20px になり、mouseleave() すると、幅はプレビューの幅になります。

私はこれを行うことができましたが、マウスで非常に速く画像を移動すると、拡大と縮小が始まり、レイアウトが乱雑になります。

必要なことを行うプラグインをいくつか見つけましたが、それらはすべて同じ幅と高さの画像を使用しています。

誰かが助けてくれれば、本当に感謝しています。

ここにコードのリンクがありますhttp://jsfiddle.net/ClaudiuTicu/9kTft/2/

 var original_w;
$('.getBigger').on('mouseenter', function () {
    original_w = $(this).find('img').width(); //add the width of thye image to the parent
    original_h = $(this).find('img').height(); //add the height to the parent

    if ($(this).find('img').is(':animated')) { }
    else {
        if ($(this).attr('style')) { } //has the style attribut
        else {
            $(this).css({
                'width': original_w,
                'height': original_h
            });
        } //dosen't have the style attribut
    }

    if ($(this).find('img').width() == original_w) {
        $(this).find('img').animate({
            'width': original_w + 20
        }).addClass('hovered');
    } //if the image width is equal with the parent's width
    else {

    }


}).on('mouseleave', function () {
    if ($(this).find('img').width() != original_w) {
        $(this).find('img').animate({
            'width': original_w
        }).removeClass('hovered');
    }
    console.log(original_w);
}); //end mouse leave