jquery - 为什么这个 CSS3 动画只触发一次？我如何解决它？

Question

这个问题不太可能对任何 future 的访客有帮助；它只与一个较小的地理区域、一个特定的时间点或一个非常狭窄的情况相关，通常不适用于全世界的互联网受众。如需帮助使此问题更广泛适用， visit the help center 。

已关闭 10 年前。

<强> The fiddle is here.

HTML:

    <div style="background-color: blue">
        <a style="margin-left: 30px;" href="#" class="avatar currentHover2" ><img      class="avatar_img" alt="" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcScGVKjsfovuONBaVL4frlyX0KkryNdsigEeCk_EMdowWBj25eN"  style="padding: 10px;">    </a>
        <a style="margin-left: 30px;" href="#" class="avatar currentHover2" ><img class="avatar_img" alt="" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcScGVKjsfovuONBaVL4frlyX0KkryNdsigEeCk_EMdowWBj25eN" style= "padding: 10px;">    </a>
    </div> 

jQuery:

    $(".currentHover2").hover(function () {
        $(this).addClass('magictime puffIn');
    });

CSS 文件又长又乱

Answer 1

你永远不会告诉它删除该类，因此效果将再次运行，如下所示:

$(".currentHover2").hover(function () {
    $(this).addClass('magictime puffIn');
}, function() {
    $(this).removeClass('magictime puffIn');
});

或者更确切地说，最初您添加了该类，并且由于下次您将鼠标悬停时该类已经存在，因此没有任何变化。