创建跳跃效果，不允许动画堆叠

Question

我一直在尝试在jQuery中创建一些简单的游戏，我想有一个可以模拟跳跃的div。所以我写了下面的代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(document).keydown(function(e){
$(".box").stop(true);   
if (e.which == 37) { 
if(parseInt($(".box").position().left)>49){
$(".box").css("left", parseInt($(".box").position().left)-50);
}
return false;
}
if (e.which == 38) { 

$(".box").animate({ 
bottom: "+=50px",
},function(){
$(".box").animate({bottom: "-=50px"});
});
return false;
}
if (e.which == 39) { 

return false;
}
if (e.which == 40) { 

return false;
}
});
});
</script>
<div style="width:500;margin:0px auto;">
<div class="main" style="width:500px;height:500px;border:1px solid #ccc;position:relative;">
<div class="box" style="border:1px solid #ccc;width:50px;height:50px;box-sizing:border-box;position:absolute;left:100px;bottom:0px;"></div>
</div>
</div>

所以这段代码允许盒子向左移动和跳跃，并具有动画效果。问题是如何不只是停止动画(如在代码stop())，但根本不允许div类Box进一步跳转，直到动画完成，盒子是下降到底部0的位置。目前，如果你试图在动画运行时跳跃，代码只会停止动画。

Answer 1

实际上我找到了一个解决方案。您只需添加一个变量false，然后在检查箭头向上键是否按下时添加代码来检查它是否为false，然后在动画时添加true，动画后将其再次设置为false，因此:

$(document).ready(function(){
var isAnimating = false;
$(document).keydown(function(e){
if (e.which == 37) { 
if(parseInt($(".box").position().left)>49){
$(".box").css("left", parseInt($(".box").position().left)-50);
}
return false;
}
if (!isAnimating && e.which == 38) { 
isAnimating = true;
$(".box").animate({ 
bottom: "50px",
},function(){
$(".box").animate({bottom: "0px"},function(){
isAnimating = false; 
});
});   
return false;
}
if (e.which == 39) { 

return false;
}
if (e.which == 40) { 

return false;
}
});
});