marcos marcos - 5 months ago 11
Javascript Question

Gif wont animate on hover

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

Answer

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>