Странное поведение при добавлении и удалении класса с помощью jquery

Question

У меня есть определенный набор предопределенных классов CSS, с помощью которых я могу анимировать div. Сценарий заключается в том, что я пытаюсь анимировать div с «слайдом». Просто добавив класс «slide in» в div, вы запустите div. Но проблема возникает, когда вы делаете это второй раз. во второй раз у div уже будет класс «slide in», поэтому я удаляю класс «slide in», и я снова добавляю тот же класс для анимации. Но анимация не происходит, но когда я добавляю задержку 10 мс, прежде чем добавлять класс «slide in» сразу после удаления класса «слайд», происходит анимация.

Демос, хорошо работает только в браузерах Webkit

Demo один (без добавления задержки времени, анимация не работает во второй раз)

Demo1 Попробуйте слайд в два раза кнопку.

Demo два, (дополнительная задержка времени, анимационные работы)

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); 
} 

Answer 2

Лучше всего сделать было бы связать свой анимированный элемент в animationend обратного вызова, который получает вызывается при CSS анимация завершается.

Вот как я бы переписать ваши 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'); 
}