javascript - 图片无法被 JavaScript 识别

Question

HTML 代码

<div>
    <img  id="in" width="300px">
</div>

JavaScript 代码

    var image = document.getElementById("in");
image.src = "http://upload.wikimedia.org/wikipedia/commons/5/51/Google.png";
image.animate({marginTop: "100vh"});

每次我运行这个程序时，我都能加载图像，但我无法在其上执行动画。我收到此错误:

Uncaught TypeError: Failed to execute 'animate' on 'Element': No function was found that matched the signature provided.

我应该怎么做才能解决这个问题？

Fiddle

提前致谢!

Answer 1

image 是一个 dom 元素而不是 jQuery，因此其中没有名为 animate 的方法

var image = document.getElementById("in");
image.src = "http://upload.wikimedia.org/wikipedia/commons/5/51/Google.png";
$(image).animate({
    marginTop: "100vh"
});

演示:Fiddle

---

您还可以使用 jQuery 选择器在设置 src 时访问 img 元素

$('#in').attr('src', 'http://upload.wikimedia.org/wikipedia/commons/5/51/Google.png').animate({
    marginTop: "100vh"
});

演示:Fiddle