爲什麼這個CSS3動畫只觸發一次？我如何解決它？

The fiddle is here.爲什麼這個CSS3動畫只觸發一次？我如何解決它？

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文件很長，在小提琴

來源

2013-06-22 user1452893

你從來沒有告訴它刪除類這樣的效果將再次如此運行：

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

或者，相反，最初是您添加該類，因爲下次您將鼠標懸停在任何更改上時該類已經存在。

來源

2013-06-22 20:45:49 asafreedman

哎呀！那很快。謝謝，我感覺像一個屁股。 – user1452893

這東西每天都在工作。我仍然設法這樣掙扎。 – asafreedman

您必須在hover之後刪除classmouseout。

嘗試

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

WORKING FIDDLE

來源

2013-06-22 20:46:55

爲什麼這個CSS3動畫只觸發一次？我如何解決它？

回答

相關問題