Animate.css isn’t working when adding/removing classes

For whatever reason my the addClass, removeClass is not working in my hover function. I thought it was a syntax issue but even after I resolved the the issue still remains. Please advise.

Here is the function

$(".run").hover(function(){
  //alert("1");
  $(this).addClass("animated infinite");
}, function(){
  //alert("2");
  $(this).removeClass("animated infinite");
});

And here is a link to the function http://jsfiddle.net/galnova/y50wr52n/9/


solution

It’s because you aren’t toggling the bounce class.

Updated Example

$(".run").hover(function(){
    $(this).addClass("animated infinite bounce");
  },
  function(){
    $(this).removeClass("animated infinite bounce");
  }
);

Apparently there are some cross-browser inconsistencies. This fixes it in Chrome. Now it works in all supported browsers.

You can avoid JS/jQuery completely and use the following:

Example Here

.run:hover {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom;
}

You might want to use the animation shorthand, though:

Example Here

.run:hover {
  -webkit-animation: bounce 1s infinite both;
  animation: bounce 1s infinite both;
  -webkit-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom;
}