Gif wont animate on hover

Question

I saw this post and I tried to replicate the code: Stop a gif animation onload, on mouseover start the activation. I can't seem to get it to work though. My goal is to swap the image with a gif on hover. Does someone know why the image isn't swapping?

$(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>

Here is a live link to my example: http://fosterinnovationculture.com/dcc/index.html

@anthony write answers as answers and not as edits. it is just confusing and you dont earn any credits ;) — doniyor, Jun 29 '16 at 04:52
I didn't know my edit would fix it, all I did was add jQuery :P But yeah I understand, thanks. I've deleted my answer. — Anthony Astige, Jun 29 '16 at 04:53
@AnthonyAstige Your edit hasn't fixed it yet. Check out the link: http://fosterinnovationculture.com/dcc/index.html — marcos, Jun 29 '16 at 04:57
@marcos Test with a snippit, not an entire website which can introduce a lot of problems. To see if the snippit works, real images still have to be put in (it looks like the swapping is working, but I can't tell without real images there if the animation swapping is). — Anthony Astige, Jun 29 '16 at 04:59
I didn't see `.gif` variant of that image. When i tried to edit the source it didn't work load up on 2/3 attempts. I suggest you to catch the images first for a better rendering. — Rohit416, Jun 29 '16 at 05:15
Also, i can see you have two versions of `jQuery` on that page, one is uncompressed _v2.2_ and other is minified _v3.0_. — Rohit416, Jun 29 '16 at 05:18

score 0 · Answer 1 · answered Jun 29 '16 at 05:06

0

Yes its correct as told by @madalin ivascu, you need to add jquery at header and it will work.

Like this,

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>

answered Jun 29 '16 at 05:06

Saurabh Sonawane

941
7
9

I added the JQuery reference to the header but it's still not working. Here is the updated example: (http://fosterinnovationculture.com/dcc/index.html) – marcos Jun 29 '16 at 05:10
@marcos check this fiddle here https://jsfiddle.net/azt2yhu6/1/ its working – Saurabh Sonawane Jun 29 '16 at 05:39

score 0 · Accepted Answer · answered Jun 29 '16 at 05:10

From what your page is saying jQuery is undefined. So either you are trying to execute jquery code before jquery is executed.

I executed this code on your site just to testing things out and it seems to be working

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

I did notice though that because of some styling issues the hover was never actually hitting the img it was actually hitting the .image:after css psuedo selector so you need to reorganize your html or change the way you select the element you want to switch the src of.

just to test in your html move the image outside of <div class="image">image</div>

score 0 · Answer 3 · answered Jun 29 '16 at 05:13

Try this, Instead of using hover, try that using mouseenter and 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 wont animate on hover

3 Answers3