添加/删除类时 Animate.css 不起作用答案

【问题标题】：Animate.css isn't working when adding/removing classes添加/删除类时 Animate.css 不起作用
【发布时间】：2015-02-26 14:58:06
【问题描述】：

无论出于何种原因，我的 addClass、removeClass 在我的悬停功能中都不起作用。我认为这是一个语法问题，但即使我解决了问题仍然存在。请指教。

这里是函数

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

这里是函数的链接 http://jsfiddle.net/galnova/y50wr52n/9/

【问题讨论】：

标签： jquery css syntax css-animations

【解决方案1】：

这是因为您没有切换 bounce 类。

Updated Example

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

显然存在一些跨浏览器的不一致。这在 Chrome 中修复了它。现在它适用于所有支持的浏览器。

您可以完全避免使用 JS/jQuery 并使用以下内容：

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;
}

不过，您可能想使用动画速记：

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;
}

【讨论】：