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

时间:2017-11-14 14:54:13

标签: 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>
&#13;
&#13;
&#13;

可能有一个非常简单的原因。

2 个答案:

答案 0 :(得分:1)

documentReady中有一个documentReady没有用(documentReady等待DOM准备就绪,第二次检查是双倍的)。

此外,您可以直接使用.src属性,从而生成以下代码:

$(document).ready(function()
{
    $("#imgAnimate").hover(
        function(){
            this.src = "Videos/Mathew-Demo.gif";
        },
        function(){
            this.src = "Static shots/Mathew-Demo.png";
        }
    );
});

除此之外,你的代码似乎很好。你确定jQuery被加载了吗?您的代码段不包含它。这是snippet with working example

答案 1 :(得分:1)

您的脚本失败,因为它尝试使用jQuery&#34; $&#34;在加载jQuery之前。你应该将你的脚本声明移动到你的身体标签的底部,如下所示:

    dataframe
       .GroupBy(x => new { x.State, x.City})
       .Select(x => new {
          x.Key.State,
          x.Key.City,
          Count = x.Count(),
          Sum_Budget = x.Sum(y => y.Budget),
          Sum_Income= x.Sum(y => y.Income)
       }
}).ToArray();