jquery를 사용하여 클래스를 추가하고 제거하는 동안의 이상한 동작

Question

div를 움직일 수있는 미리 정의 된 특정 CSS 클래스 집합이 있습니다. 시나리오는 '효과있는 슬라이드'로 div를 애니메이션으로 만들려고한다는 것입니다. div에 'slide in'클래스를 추가하면 div 슬라이드가 삽입됩니다.하지만 문제는 두 번째로 발생합니다. 두 번째로 div는 이미 'slide in'클래스를 가지고 있으므로 'slide in'클래스를 제거하고 동일한 클래스를 다시 추가하여 애니메이션을 적용합니다. 그러나 애니메이션이 발생하지 않지만 'slide in'클래스를 제거한 직후 'slide in'클래스를 추가하기 전에 10ms 지연을 추가하면 애니메이션이 발생합니다.

데모는, 단지 웹킷 브라우저에서 잘 작동

데모 하나, (단, 시간 지연, 애니메이션 나던 일 두 번째 시간 추가 없음)

Demo1 버튼을 두 번에 슬라이드를 사용해보십시오.

데모이, (시간 지연, 추가 된 애니메이션 작품)

Demo2 버튼을 두 번에 슬라이드를 사용해보십시오.

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

애니메이션이 완료된 후 나는 클래스를 제거 -

내가 알고 싶은

, 이것은 시간 지연에 의존하지 않고 할 수있는 방법을 데모의 경우 1

Answer 1

이하여 슬라이드 기능을 대체 . 데모 : 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

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