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

Question

小提琴在这里。

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');
});

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

Answer 2

您必须class在mouseout.hover

尝试

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

工作小提琴