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/
It's because you aren't toggling the bounce class.
$(".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:
.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:
.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;
}