Animate.css 在 adding/removing 类 时不工作
Animate.css isn't working when adding/removing classes
无论出于何种原因,我的 addClass、removeClass 在我的悬停功能中不起作用。我认为这是一个语法问题,但即使我解决了这个问题,问题仍然存在。请指教
这是函数
$(".run").hover(function(){
//alert("1");
$(this).addClass("animated infinite");
},
function(){
//alert("2");
$(this).removeClass("animated infinite");
}
);
这里是函数的 link
http://jsfiddle.net/galnova/y50wr52n/9/
这是因为您没有切换 bounce
class。
$(".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;
}
您可能想要使用动画 shorthand,但是:
.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;
}
无论出于何种原因,我的 addClass、removeClass 在我的悬停功能中不起作用。我认为这是一个语法问题,但即使我解决了这个问题,问题仍然存在。请指教
这是函数
$(".run").hover(function(){
//alert("1");
$(this).addClass("animated infinite");
},
function(){
//alert("2");
$(this).removeClass("animated infinite");
}
);
这里是函数的 link http://jsfiddle.net/galnova/y50wr52n/9/
这是因为您没有切换 bounce
class。
$(".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;
}
您可能想要使用动画 shorthand,但是:
.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;
}