Javascript 如何重置jquery动画并重新开始

我正在做一个简单的javascript游戏，你点击球，它会上升，你必须在它触地之前再次点击它。如何使球在向下的过程中单击，它停止最后一个请求并再次开始向上移动

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> 
    function moveBall() {
        $.fx.speeds._default = 3000;
        $("#ball").animate({bottom:'360px'});
        $("#ball").animate({bottom:'0px'});
        setTimeout( function(){
            document.getElementById("block").innerHTML = "Game Over";
        }, 6000 );
    }
    </script> 

    <style>
        #ballGame {
            height:350px;
            width:350px;
            border-style:solid; 
            border-width:5px;
            overflow:hidden;
        }
        #ball {
            background:#98bf21;
            height:50px;
            width:50px;
            position:relative;
            border-radius:100px;
            outline:0;
        }
        #block {
            height:300px;
        }
</style>

<div id="ballGame">
    <center>
        <div id="block"></div>
        <button id="ball" onclick="moveBall()"></button>
    </center>
</div>

函数moveBall（）{
$.fx.速度。\u默认值为3000；
$（“#球”）.animate（{底部：'360px'}）；
$（“#球”）.animate（{底部：'0px'}）；
setTimeout（函数（）{
document.getElementById（“block”）.innerHTML=“游戏结束”；
}, 6000 );
}
#球赛{
高度：350px；
宽度：350px；
边框样式：实心；
边框宽度：5px；
溢出：隐藏；
}
#球{
背景:#98bf21；
高度：50px；
宽度：50px；
位置：相对位置；
边界半径：100px；
大纲：0；
}
#挡块{
高度：300px；
}

尝试

$（“#ball”）。在
moveBall
函数开始时停止（真、假）

---

查看jQuery文档：

既然您已经在使用jQuery，我会先清理一下代码；您不需要在HTML代码中调用函数（

onclick=“moveBall（）”

）。相反，只需创建一个单击功能：

$('#ball').click(function() {
    $('#ball').stop(true);
    $("#ball").animate({bottom:'360px'});
    $("#ball").animate({bottom:'0px'}, function() {
        $('#block').text("Game Over");
    });
}

我还更改了显示文本“Game Over”（游戏结束）的部分，使其仅在将球向下移动的动画完成时显示

---

这里有一把小提琴：

谢谢，不是学校的项目，但我也被“游戏结束”的延迟卡住了。谢谢你的帮助没问题！（很抱歉这么说；我把它从我的回答中删除了…）