悬停时 Gif 不会动画答案

【问题标题】：Gif wont animate on hover悬停时 Gif 不会动画
【发布时间】：2016-06-29 04:47:54
【问题描述】：

我看到了这篇文章，并尝试复制代码：Stop a gif animation onload, on mouseover start the activation。我似乎无法让它工作。我的目标是在悬停时将图像与 gif 交换。有人知道为什么图像没有交换吗？

$(document).ready(function() {
  $("#imgAnimate").hover(
    function() {
      $(this).attr("src", "images/portfolio/form.gif");
    },
    function() {
      $(this).attr("src", "images/portfolio/form.jpg");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="large-12 medium-12 small-12 columns portfolio-pic animated slideInUp">
    <div data-content="Project 1" class="image">
      <a class="a-block" href="#">
        <img id="imgAnimate" src="images/portfolio/form.jpg">
      </a>
    </div>
  </div>
</div>

这是我的示例的实时链接：http://fosterinnovationculture.com/dcc/index.html

【问题讨论】：

将 jquery 添加到您的页面
@anthony 将答案写为答案而不是编辑。这只是令人困惑，您没有获得任何积分；）
我不知道我的编辑会修复它，我所做的只是添加 jQuery :P 但是我明白了，谢谢。我已经删除了我的答案。
@AnthonyAstige 您的编辑尚未修复。查看链接：fosterinnovationculture.com/dcc/index.html
@marcos 使用代码段进行测试，而不是整个网站，这会带来很多问题。要查看 snippit 是否有效，仍然必须放入真实图像（看起来交换正在工作，但如果没有真实图像，我无法判断动画交换是否有效）。

标签： javascript jquery html css

【解决方案1】：

从你的页面说 jQuery 是未定义的。因此，要么您尝试在执行 jquery 之前执行 jquery 代码。

我在您的网站上执行此代码只是为了测试它，它似乎正在工作

function mousein () {
  $(this).attr("src", "images/portfolio/form.gif");
  console.log('hello')
}

function mouseout () {
  $(this).attr("src", "images/portfolio/form.jpg");
}

console.log($('#imgAnimate').hover(mousein, mouseout));

我确实注意到，由于一些样式问题，悬停实际上从未击中 img 它实际上击中 .image:after css psuedo 选择器，因此您需要重新组织 html 或更改选择元素的方式想要切换src。

只是为了在你的 html 中测试将图像移到外面 <div class="image">image</div>

【讨论】：

【解决方案2】：

是的，正如@madalin ivascu 所说，它是正确的，您需要在标题处添加 jquery，它会起作用。

这样，

HTML

<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $("#imgAnimate").hover(
    function() {
      $(this).attr("src", "banana.gif");
    },
    function() {
      $(this).attr("src", "banana.png");
    });
});
</script>
</head>


<body>
    /* include your html part here */
    <a class="a-block" href="#">
        <img id="imgAnimate" src="banana.png" alt="">
    </a>

</body>

【讨论】：

我将 JQuery 引用添加到标题中，但它仍然无法正常工作。这是更新后的示例：(fosterinnovationculture.com/dcc/index.html)
@marcos 在这里检查这个小提琴jsfiddle.net/azt2yhu6/1它的工作

【解决方案3】：

试试这个，不要使用hover，而是使用mouseenter 和mouseleave。

$(document).ready(function(){
  $(".row").find('img').mouseenter(function(){
    if($("#imgAnimate").attr('src','form.jpg')){
        $("#imgAnimate").attr('src','form.gif');
    }
    $(this).mouseleave(function(){
        if($("#imgAnimate").attr('src','form.gif')){
        $("#imgAnimate").attr('src','form.jpg');
    }
    });
  });
});

【讨论】：