使用jquery添加和删除类时的奇怪行为

我有一组预定义的css类，使用它们我可以制作一个div的动画。场景是，我试图用“幻灯片生效”来制作一个div的动画。只需在div中添加“slide-in”类，就可以使div滑入。但问题是当你第二次这样做的时候。第二次，div已经有了“slide-in”类，所以我删除了“slide-in”类，并再次添加了相同的类来制作动画。但是动画没有发生，但是当我在删除“slide-in”类之后添加“slide-in”类之前添加10毫秒的延迟时，动画就会发生

演示，仅在webkit浏览器中运行良好

演示一，（没有添加时间延迟，第二次动画不起作用）

尝试滑入按钮两次

演示二，（增加延时，动画作品）

尝试滑入按钮两次

---

我想知道，演示1如何在不依赖时间延迟的情况下实现这一点-将幻灯片功能替换为：

function slide(){
  $('#tg').addClass('slide in');
 var t= setTimeout(function(){$('#tg').removeClass('slide in');},600);
}

动画完成后，我删除了该类。演示：

对于自动滚动： 将您的js替换为以下内容：

function slide(){
  interval = setInterval(function(){slide_me();},2000);
}

function slide_me(){
  $('#tg').addClass('slide in');
    t= setTimeout(function(){$('#tg').removeClass('slide in');},600);
}

---

最好的做法是将动画元素绑定到CSS动画完成时触发的

animationend

回调

以下是我将如何重写您的JS：

// Bind your element to animationend callbacks from all supporting browsers
$('#tg').bind('webkitAnimationEnd mozAnimationEnd msAnimationEnd oAnimationEnd animationEnd', function(event){
  // Each time this callback is called the "slide in" classes are removed.
  $('#tg').removeClass('slide in');
});

// Each time the button is clicked the classes are re-added
function slide() {
  $('#tg').addClass('slide in');
}

---

我知道，这不是你问题的答案，但它可能更容易使用