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

Image with Animation CSS + Submit Button Hover

本文关键字：提交 按钮 悬停 CSS 动画 图像      更新时间：2023-09-26

我有一个Animation .css 

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

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

但是当用户将鼠标悬停在提交按钮上时，我想重新加载相同的动画。

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

然后我尝试在悬停时重新加载动画-例如:

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

但是什么也没发生。

重要:动画发生在图像中。(不在按钮中)

谢谢大家的帮助!

http://jsfiddle.net/j03hgtae

丹尼尔

使用.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();
});

查看更新后的fiddle

并且，正如第一个答案所述，您的目标是.log-btn而不是#log-btn。

您的目标是.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。或者，考虑在button元素中添加一个名为"log-btn"的类。

相关文章：