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

您可以使用hasClass（）檢查swing類是否存在（注意，我還刪除了不必要的雙重初始化）：

http://jsbin.com/onemix/8

另外，最好不要使用setTimeout，而是使用適當的動畫結束事件：

http://jsbin.com/onemix/9