jquery - jQueryアニメーション停止奇妙な出力

Question

私の問題は、幅、高さ、左上だけでハートをアニメーション化することですが、アニメーションを停止せず、2倍にし、閉じて再度開くと各ステップを2回、3回閉じると3回実行します。すぐ。

以前に .stop(true, false) を使用して成功したが、このアニメーションでは機能していないので迷惑です。中央に配置されたコンテナ div の絶対値の -= と += をすべて置き換えようとしました (左上は方向の変更が異なります）が、それを愛していませんでした。

また、実行中の変数を試して、それを false および .clearQueue() に設定します。また、 $('#Heart') を変数として配置し、常にそのように呼び出しますが、問題は解決しません。誰かが私にこの振る舞いの理由を指摘できれば、私はそれを大いに感謝します.

function opened() {
    var Heart = $('#Heart');
    if (Pacemaker === 3) {
        $('#Heart').fadeOut(100, function () {
            $('#Div').fadeIn(100);
            Runner = false;
        });
    }
    if (Runner === true && Pacemaker < 3) {
        Heart.animate({width: '170px', height: '142px', left: '10px', top: '+=10px'}, 600,     function () {
            console.log('still');
            Heart.animate({width: '210px', height: '182px', left: '0px', top: '-=10px'}, 600, function () {
                console.log('still');
                Heart.animate({width: '170px', height: '142px', left: '10px', top: '+=10px'}, 600, function () {
                    console.log('still');
                    Heart.animate({width: '210px', height: '182px', left: '0px', top: '-=10px'}, 600, function () {
                        console.log('still');
                        Pacemaker++;
                        /*$('#Heart').stop(true, false); tried also putting it here*/

                        opened();        
                    });       
                });     
            });       
        });
    }
}

//------------------------------------------------------------------------------

function closed() {
    $('#Heart').stop(true, false).css({display : 'block' });
    $('#Heart').clearQueue();
    Pacemaker = 0;   

}