BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] jQuery .animate()が動作しない

2022-01-25 15:37:21

質問

私はjQueryの初心者で、Codecademyで勉強しています。サイト内で「コードビット」（ウェブサイト）を作成しているのですが、上下左右のキーを押した時に画像スプライトが反応（移動）するようにしようとしています。
HTMLです。 

<!DOCTYPE html>
<html>
    <head>
        <title>Sprite</title>
        <link rel='stylesheet' type='text/css' href='style.css'/>
        <script type='text/javascript' src='script.js'></script>
    </head>
    <body>
        <img src="[img]"/>
    </body>
</html>

CSSです。 

img {
    position: relative;
    left: 0;
    top: 0;
}

Javascriptを使用しています。 

$(document).ready(function() {
    $(document).keydown(function(key) {
        switch(parseInt(key.which,10)) {
            //LEFT
            case 37:
                $('img').animate({left: "-=10px"}, 500);
                break;
            //RIGHT
            case 39:
                $('img').animate({left: "+=10px"}, 500);
                break;
            //UP
            case 38:
                $('img').animate({top: "-=10px"}, 500);
                break;
            //DOWN
            case 40:
                $('img').animate({top: "+=10px"}, 500);
                break;
        }
    });
});

いくつかのサイトで構文エラーをチェックしたのですが、明らかなものは見つからないようです。助けていただけると幸いです。

解決方法を教えてください。

jQuery-scriptをhead内（自作のscript.jsの前）にインクルードする必要があります。

のように 

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します