javascript - 使用 jQuery animate 时看不到动画

Question

所以我知道这个问题已经被问过很多次了，但是我找不到适合我的答案。我已经在我的脚本之前包含了 jQuery Google API 行，而且据我所知，我很确定我的语法是正确的(因为我正在观看教程视频)。我还在某些地方添加了几行 console.log() 并且我确信它会通过 animate 函数并到达代码末尾。这是我的代码:

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(也不是全部，只是我遇到问题的部分)

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

回到index.html(这里是设置皮卡丘图片的地方)

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

有人知道为什么我看不到动画吗？

Answer 1

可能是 img 标签的问题，你的 id 的双引号跟 src 一样。

在我的测试中没有发现其他问题:

注意:在 HTML 中使用样式属性是不好的做法。请改用纯 CSS!请记住，当动态操作的 CSS 元素说 whatever.style.color = "red" 时，它会添加 style 属性，然后才应该使用它。

也感谢 HTML5 you can scrap the type="text/javascript"在您的 script 标签上。

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