javascript - 悬停时图像源更改未按预期工作

标签 javascript jquery

我正在尝试创建一个在悬停时播放 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/

相关文章:

javascript - Facebook 页面的 'like' 按钮,但带有回调

javascript - 部分下拉菜单中的 Jquery 下拉菜单

javascript - Require.js 未捕获类型错误 : jqOAuth is not a function

javascript - 在函数内分配全局变量

javascript - HTML5历史禁用前进按钮

php - 从 json 返回多个值

javascript - Jquery 拖放到空 div 中并返回

javascript - 对象方法比全局函数快吗?

javascript - WebSocket 总是发送字符串化的 JSON 对象作为缓冲区

javascript - jQuery 在扩展 html python Flask 中无法识别