jquery，css3動畫和時間問題

Question

我有幾個圖像應該在懸停時執行一個簡短的動畫。

這是我用來給他們懸停的動畫類，並在動畫時間結束後刪除它。

$('.box').on('mouseenter',function(){ 
    var box = $(this); 

    $(box).addClass('swing'); 

    setTimeout(function(){ 
     $(boxen).removeClass('swing'); 
    },2000); 

}); 

問題是，這是相當多的錯誤。檢查出http://jsbin.com/onemix並將它們懸停幾次，您就會看到問題所在。

我想我需要檢查他們是否在動畫時懸停觸發，以避免新的超時。

有什麼建議嗎？

Answer 1

你可以檢查存在擺動類beeing使用hasClass()（請注意，我也去掉了不必要的雙重初始化）：

http://jsbin.com/onemix/8

而且它可能是最好不要使用setTimeout的，但適當的動畫結束事件：

http://jsbin.com/onemix/9