jquery - 向上或向下按下时，jQuery 动画会跳转到父级的顶部。适用于左右

Question

我正在尝试制作一个有趣的太空射击游戏。我为我的宇宙飞船的位置设置了动画，但是当我向上或向下按时，它会跳到父元素的顶部。我注意到这样做会覆盖css“底部”属性。有人知道如何解决这个问题吗？

这是我的代码：

$(document).keydown(function(key) {
    switch(parseInt(key.which)) {
        case up:
            $('#ship').animate({top: "-=100px"}, '10', 'linear');
            break;

        case down:
            $('#ship').animate({top: "+=100px"}, '10', 'linear');
            break;

        case left:
             $('#ship').animate({left: "-=100px"}, '10', 'linear');
            break;

        case right:
            $('#ship').animate({left: "+=100px"}, '10', 'linear');
            break;
    }
});

Answer 1

您必须指定topor bottom，但不能同时指定两者，因为一次只能激活一个。如果你有一个bottom值，然后你设置了一个top值，你将不会从原来的位置平滑移动，因为它会从默认值动画到你的小于值，这将导致它立即跳转到top然后动画从那里。0100pxtop:0

如果您要最初指定bottom并希望从中平滑动画，则为bottom值设置动画，而不是top值。

因此，要么将您的初始 CSS 更改为使用top，bottom要么将您的代码更改为 animate bottom。在两者之间保持一致，您将不会在制作动画时看到跳跃。