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

Answer 2

解决方案

jQuery 函数只能在 jQuery 选择的元素上执行，使用

var image = $("#in");

另一种方式是，您正在制作一个 native 元素 而不是 jQuery 元素。这意味着它无法访问 jQuery 函数

为什么和如何

jQuery的编码方式，是.animate()等函数是prototype (info)

更多

您也可以使用 jQuery .attr 来缩短您的代码。 jQuery 函数可以链接，也可以放在一起。

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

JSFiddle