创建跳跃效果，不允许动画叠加答案

【问题标题】：Create jumping effect, do not allow animation to stack up创建跳跃效果，不允许动画叠加
【发布时间】：2021-10-16 04:43:55
【问题描述】：

我一直在尝试在 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() 中），而且在动画完成并且盒子下降到底部 0 之前不允许 div 类 Box 进一步跳转。目前代码只是如果您在动画运行时尝试跳跃，则停止动画。

【问题讨论】：

标签： jquery-animate

【解决方案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;
    }
    });
});

【讨论】：