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

Question

我有一组预定义的 css 类，使用它们我可以为 div 制作动画。场景是我正在尝试使用“幻灯片效果”对 div 进行动画处理。只需向 div 添加“slide in”类即可使 div 滑入。但第二次这样做时就会出现问题。第二次时，div 已经具有“滑入”类，因此我将删除“滑入”类，并再次添加相同的类进行动画处理。但是动画没有发生，但是当我在删除“滑入”类之后添加“滑入”类之前添加 10 毫秒的延迟时，动画就会发生。

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

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

Demo1尝试滑入按钮两次。

演示二，(添加时间延迟，动画有效)

Demo2尝试滑入按钮两次。

我想知道，如何在不依赖时间延迟的情况下完成此操作

Answer 1

对于演示 1 - 将幻灯片函数替换为:

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

我在动画完成后删除了该类。演示:http://jsbin.com/eyerot/12/edit

对于自动滚动: 将你的 js 替换为:

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

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