为什么这部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

您必须在hover之后删除mouseout上的class。

尝试

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

工作FIDDLE