Question

我看到这篇文章，我试图复制代码：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

Answer 1

是的，正如@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>

Answer 2

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

我在您的网站上执行此代码只是为了测试一些内容，而且似乎正在运行

＆＃13;

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));

＆＃13;

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

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

Answer 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');
    }
    });
  });
});

Gif不会在悬停时动画

3 个答案: