带有动画 CSS 的图像 + 提交按钮悬停

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。或者，考虑将名为“log-btn”的类添加到按钮元素。