Question

我正在制作一个简单的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>

Answer 1

在$("#ball").stop(true, false)功能的开头尝试moveBall。

请参阅jQuery doc：http://api.jquery.com/stop/

Answer 2

由于您已经在使用jQuery，我会先清理一下代码;您不需要在HTML代码中调用函数（onclick="moveBall()"）。相反，只需创建一个点击功能：

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

我还更改了显示文字“游戏结束”的部分，因此只有在将球带下来的动画完成时才会显示。

这是一个小提琴：http://jsfiddle.net/Niffler/a71xf13k/

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

2 个答案: