无论出于何种原因,我的 addClass、removeClass 在我的悬停功能中不起作用。我认为这是一个语法问题,但即使在我解决之后,问题仍然存在。请指教。
这是函数
$(".run").hover(function(){
//alert("1");
$(this).addClass("animated infinite");
},
function(){
//alert("2");
$(this).removeClass("animated infinite");
}
);
最佳答案
这是因为您没有切换 bounce
类。
$(".run").hover(function(){
$(this).addClass("animated infinite bounce");
},
function(){
$(this).removeClass("animated infinite bounce");
}
);
显然存在一些跨浏览器不一致的情况。这在 Chrome 中修复了它。现在它可以在所有支持的浏览器中运行。
您可以完全避免使用 JS/jQuery 并使用以下内容:
.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;
}
不过,您可能想使用动画简写:
.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;
}
关于jquery - 添加/删除类时 Animate.css 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28745644/