使用 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" 时，它会添加样式属性，然后才应该使用它。

还要感谢您的 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);
  });
});

使用 jQuery animate 时看不到动画

Can't see animation when using jQuery animate

javascript

jquery

jquery-animate