0

ちょっと楽しいスペースシューターゲームを作ろうとしています。宇宙船の位置をアニメーション化しましたが、上下に押すと、親要素の上部にジャンプします。そうするときに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;
    }
});
4

1 に答える 1

0

topまたはを指定する必要がありますbottomが、同時にアクティブにできるのは 1 つだけであるため、両方を指定することはできません。値がbottomあり、次に値を設定するtopと、デフォルト値からtopそれ0より100px小さい値にアニメーション化され、すぐにジャンプしてtop:0アニメーション化されるため、元の場所からスムーズな動きが得られませんそこから。

最初に指定bottomし、そこからスムーズにアニメーション化する場合は、bottom値ではなく値をアニメーション化しtopます。

したがって、top代わりに使用するように初期 CSS を変更するbottomか、コードを animate に変更してくださいbottom。2 つの間で一貫性を保つと、アニメーション化したときにジャンプが表示されなくなります。

于 2013-04-19T19:20:01.380 に答える