div 无法为底部设置动画并从每一侧从窗口屏幕向外移动答案

【问题标题】：div cannot animate bottom side and goes outside from window screen from every sidediv 无法为底部设置动画并从每一侧从窗口屏幕向外移动
【发布时间】：2013-10-18 10:05:01
【问题描述】：

这适用于左侧、右侧和顶部动画 div 从左侧、右侧和顶部移动，但不适用于底部 div 不能移动底部。而且当我快速按键超过十次或更多次时，它会从我的窗口屏幕的每一侧向外移动，如果我在一个动画完成后按下键，它就不能向外移动。

我的html代码：

<body>
  <div class="block"></div>
</body>

我的css代码：

div {
  position: absolute;
  background-color: #abc;
  left: 50px;
  top:50px;
  width: 100px;
  height: 100px;
}

我的 jquery 代码：

$(window).load(function(e) {
    $("body").keydown(function(e) {
    var width1 = $(window).width();
    var heigth1 = $(window).height();
    if(e.keyCode == 37) { // left
        if (parseInt($('.block').css('left')) >= 50) {     
            $('.block').animate({left: '-=50'},"slow");
        }
    }
    else if(e.keyCode == 39) { // right
        if (parseInt($('.block').css('left')) <= (width1 - 150)){     
            $(".block").animate({left: "+=50px"},'slow');
        }
    }
    else if(e.keyCode == 40){ // bottom
        if (parseInt($('.block').css('top')) <= (height1 - 150)) { 
            $(".block").animate({'top':'+=50px'},'slow');
        }
    }
    else if(e.keyCode == 38){ // top
        if (parseInt($('.block').css('top')) >= 50) {     
            $(".block").animate({'top':'-=50px'},'slow');
        }
    }
 });
});

【问题讨论】：

请把这个丑陋的“if else if else ...”变成一个开关:D
switch case代码的好处是相同的switch case与if else条件相同。
对我和很多人来说，switch 更容易阅读:)

标签： javascript jquery html css

【解决方案1】：

这是我的例子，希望对你有帮助:)

example

:)

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。
我英语不好，所以无法解释
@AramMkrtchyan 它正在工作，但不能正常工作，它也超出了某些部分而不是完整的 div。但现在可以了，谢谢。

【解决方案2】：

错别字！

var heigth1 = $(window).height();

应该是

var height1 = $(window).height();

【讨论】：

是的，你是对的，这是我的错误，谢谢它解决了我的一个问题，但不能解决其他问题
使用 JS 开发时，请始终打开开发者工具中的控制台选项卡。这将立即提醒您任何语法错误。