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中使用style属性是不好的做法。改用纯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动画时无法看到动画

1 个答案: