jQuery动画停止奇怪的输出

Question

我的问题是我动画一个心脏只是+ - 宽度，高度和左上角，但它不会停止动画，它会加倍，舔如果我关闭并再次打开将执行每一步两次，并且三次如果三次时间关闭等等。

因为我在成功之前使用了.stop（true，false）但是没有使用这个动画很烦人，我试图将所有 - =和+ =替换为居中的容器div中的绝对值（如左上方的方向变化不同）但没有解决它。

还尝试使用运行变量并将其设置为false和.clearQueue（）。另外把$（＆＃39;＃Heart＆＃39;）作为变量并将其全部调用，但问题仍然存在。如果有人能指出我为什么会出现这种情况，我会非常感激。

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;   

}