jQueryアニメーションを使用しているときにアニメーションが表示されない

Question

この質問は何度も尋ねられたことがわかっていますが、私にとってはうまくいく答えが見つかりませんでした。私はすでにスクリプトの前にjQuery Google APIのラインを含んでいます。私が知っている限り構文は正しいと私は確信しています（私はこのチュートリアルのビデオに従っています）。私はいくつかの場所でconsole.log（）のいくつかの行を追加しました。そして、私はそれがアニメート関数を渡してコードの終わりに到達していることを確かに知っています。ここに私のコードは次のとおりです。

index.htmlを（すべてではない、私はAPIが含まれていることを示すためだけの小さな部分）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<script type="text/javascript" src="js/javascript.js"></script> 

javascript.jsを（またすべてではない、私はちょうど一部

（ピカチュウ画像が設定されている場所です）戻るのindex.htmlへ

<img id="pikachu-img "src="img/pikachu.png" class="absolute" style="height: 115px; top: 40px; right: 46px"> 

を

prepareToAttack = function() { 
    $("#pikachu-img").animate({ 
     top: "-=25px" 
    }, 200, function() { 
     $("#pikachu-img").animate({ 
      top: "+=25px" 
     }, 200); 
    }); 
}; 

）との問題を抱えていなぜ私はアニメーションを見ていないのですか？

Answer 1

おそらく、imgタグが原因で、idの二重引用符がsrcに固執するという問題があります。

私のテストでは見つかりませんでした他の問題：

注： HTMLでのスタイル属性を使用することは悪い習慣です。代わりにプレーンCSSを使用してください！動的に操作された要素CSSがwhatever.style.color = "red"と言うとき、スタイル属性を追加してからそれを使用する必要があることを忘れないでください。

scriptタグのHTML5 you can scrap the type="text/javascript"もありがとうございます。

HTML：

<img id="pikachu-img" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQtDxj0kmEFUVNCUDF4G6553Hm-1w_ADcyYKhpkQf7pfsusCpHsbYpS3bQm"> 

CSS：

.pikachu-img { 
    position: absolute; 
    height: 115px; 
    top: 40px; 
    right: 46px; 
} 

JS：

$(function() { 
    $("#pikachu-img").animate({ 
    top: "-=25px" 
    }, 2000, function() { 
    $("#pikachu-img").animate({ 
     top: "+=25px" 
    }, 2000); 
    }); 
});