Animation kann nicht angezeigt werden, wenn Sie jQuery animieren

Question

, so dass ich weiß, diese Frage wurde oft gestellt, aber ich konnte keine Antwort finden, die für mich funktioniert. Ich habe die jQuery Google API-Zeile bereits vor meinem Skript eingefügt, und ich bin mir ziemlich sicher, dass meine Syntax soweit ich weiß korrekt ist (da ich ein Tutorial-Video dafür befolge). Ich habe auch ein paar Zeilen console.log() an einigen Stellen hinzugefügt und ich weiß sicher, dass es die Animate-Funktion passieren und das Ende des Codes erreichen wird. Hier ist mein Code:

index.html (Nicht alle, nur ein kleiner Teil zu zeigen, dass ich die API enthalten)

<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 (auch nicht alle, nur der Teil ich bin mit Problem mit)

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

Zurück zur index.html (Dies ist, wo das pikachu Bild eingerichtet ist)

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

Does Hat jemand eine Idee warum ich die Animation nicht sehe?

Answer 1

Vielleicht das Problem verursacht durch img-Tag, Ihr Doppel Zitat von ID-Stick mit src.

Kein anderes Problem in meinem Test gefunden:

HINWEIS: den Stil-Attribut in HTML verwenden ist eine schlechte Praxis. Verwenden Sie stattdessen einfaches CSS! Denken Sie daran, wenn ein Element CSS in dynamisch manipuliert sagen whatever.style.color = "red" es wird das Attribut style, dann und nur dann sollte es verwendet werden.

Auch dank HTML5 you can scrap the type="text/javascript" auf Ihrem script Tag.

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); 
    }); 
});