Problems with jquery, css3 animations and timing

Question

I have a couple of images which should perform a short animation upon hover.

This is what I'm using to give them the animation class on hover, and removing it after the animation time is over.

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

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

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

});

Problem is, it's quite buggy. Check out http://jsbin.com/onemix and hover them a few times and you'll see the problem.

I think I need to check if they're animating when the hover triggers, to avoid a new timeout going of.

Any suggestions?

Answer 1

You could check for the swing class beeing present using hasClass() (note that i've also removed the unnecessary double initialization):

http://jsbin.com/onemix/8

Also it might be better not to use setTimeout, but the appropriate animation end event:

http://jsbin.com/onemix/9