图像无法通过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");

另一种方式是，您正在创建本机元素而不是 jQuery 元素。这意味着它将无法访问jQuery函数

为什么以及如何

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

更多

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

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

JSFiddle