Question

我有Animate.css的动画

$('#log-circle').addClass('animated flipInY');

此动画发生在页面加载 - 没问题

但我想在用户悬停提交按钮时重新加载相同的动画。

我最初的想法是在CLICK上重新加载动画，（如果它可能是完美的） - 但我认为动画永远不会发生，因为点击提交按钮页面将变为另一个..

然后我试图在悬停时重新加载动画 - 如：

<script>
$( ".log-btn" ).hover( function() {
    $('#log-circle').addClass('animated flipOutY');
});

</script>

但没有任何反应......

重要提示：动画发生在图像上。（不在按钮中）

感谢所有帮助！

http://jsfiddle.net/j03hgtae

丹尼尔

Answer 1

使用.addClass().removeClass()实际上不会触发动画。重新触发CSS动画的最简单方法是克隆元素。

$('#log-circle').addClass('animated flipInY');

$('#log-btn').hover( function() {
  // Clone the original element
  var element = $('#log-circle'),  
        clone = element.clone(true);
  // Insert the cloned element before the original element
  element.before(clone);
  // Remove the original element
  element.remove();
});

See the updated fiddle

并且，如第一个回答所述，您的定位是.log-btn而不是#log-btn。

Answer 2

您定位.log-btn，但不存在此类。

 <button type="submit" **class="btn btn-sm input-group-sm**" style="width: 160px;  margin-bottom: 10px; margin-top: 10px" **id="log-btn"** name="log-btn">Login</button>

$( ".log-btn" ).hover( function() {
   $('#log-circle').RemoveClass('animated flipOutY');
   $('#log-circle').addClass('animated flipOutY');
});

相反，您应该定位#log-btn，因为按钮（见下文）使用ID标识符而不是类标识符。

$( "#log-btn" ).hover( function() {
    $('#log-circle').RemoveClass('animated flipOutY');
    $('#log-circle').addClass('animated flipOutY');
});

您的解决方案是将( ".log-btn" ).hover替换为( "#log-btn" ).hover。或者，考虑添加一个名为＆＃34; log-btn＆＃34;到按钮元素。

图像与动画CSS +提交按钮悬停

2 个答案: