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