带有动画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();
});

查看更新的小提琴

而且，如第一个答案所述，您的目标是.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标识符，而不是Class标识符。

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

您的解决方案是将( ".log-btn" ).hover为( "#log-btn" ).hover 。 ( "#log-btn" ).hover 。 或者，考虑将名为“ log-btn”的类添加到按钮元素。