我正在尝试创建一个在悬停时播放 GIF 的图像。我在这个网站上发现了一些 jquery,据说可以工作,但由于某种原因不适合我。关于原因有什么想法吗?
这是 html 和 javascript:
$(document).ready(function(){
//animate image on hover
$(document).ready(function()
{
$("#imgAnimate").hover(
function()
{
$(this).attr("src", "Videos/Mathew-Demo.gif");
},
function()
{
$(this).attr("src", "Static shots/Mathew-Demo.png");
});
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="team.css">
<script src="team.js" type="text/javascript">
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<img src="Static shots/Mathew-Demo.png" id="imgAnimate">
</body>
</html>
可能有一个非常简单的原因。
最佳答案
您的脚本失败是因为它在加载 jQuery 之前尝试使用 jQuery 的“$”。你应该将你的脚本声明移动到 body 标签的底部,如下所示:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="team.css">
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<img src="Static shots/Mathew-Demo.png" id="imgAnimate">
<script src="team.js" type="text/javascript">
</body>
关于javascript - 悬停时图像源更改未按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47288760/