jQuery 클릭 이벤트로 Animate.css 문제

Question

jQuery로 빌드하는 양식에 필드 유효성 검사를 적용하려고합니다. 또한 animate.css을 사용하여 다른 애니메이션 클래스를 적용합니다.

전자 메일 필드가 하나 있다고 가정하고 사용자가 제출을 클릭하고 입력 한 전자 메일이 유효한지 여부를 확인합니다. 그렇지 않은 경우 shake 애니메이션을 입력 필드에 적용하십시오.

내가 지금까지 가지고있는 코드 :

$submit.click(function(event) { 
    event.preventDefault(); 
    var email = $input.val(); 

    // This does not seem to ever fire. 
    $input.removeClass('shake'); 

    if (!method.validateEmail(email) || $.trim(email) == '') { 
    $input.addClass('shake'); 
    return; 
    } 

    $form.submit(); 
}); 

이 사용자가 양식을 제출 처음으로 작동합니다. 그러나 이후의 클릭은 흔들기 애니메이션을 재생산하지 않습니다. 이메일이 유효한지 여부를 확인하기 전에 removeClass ('shake')를 적용 해 보았지만 실행되지는 않습니다.

내가 생각해 낸 다른 방법은 입력 필드에 흔들림 클래스가 있는지 여부를 확인하기 위해 2000ms 간격을 설정하는 것입니다. 그렇다면이를 제거하십시오.하지만 사용자가 양식을 제출할 수 있기 때문에 버그가 있습니다. 300ms 인터벌이 끝나기 전에 애니메이션은 남은 시간만큼 지속됩니다. 간격에 대한 코드는 다음과 같습니다

setInterval(function() { 
    if ($input.hasClass('shake')) { 
    $input.removeClass('shake'); 
    } 
}, 2000); 

바이올린은 http://jsfiddle.net/9Zs9T/1/

방법 양식이 잘못된 입력으로 모든 단일 제출을 흔들해야하는 어떤 생각에서 찾을 수 있습니까? 감사.

Answer 1

귀하의 코드

$submit.click(function(event) { //... 

은 $ 제출 선택에 클릭 이벤트를 보냅니다. 아마, 당신이하고 싶은 사용자가 클릭 이벤트 내에서 대신 클래스를 제거하는 애니메이션의 끝에서 화재에게 이벤트를

$submit.on("click", function(event) { //... 

Answer 2

을 클릭 할 때 함수를 실행합니다.

$input.one('webkitAnimationEnd mozAnimationEnd 
    MSAnimationEnd oanimationend animationend', $(this).removeclass('shake')); 

필자는 테스트하지 않았지만 효과가 있다고 생각합니다.

---

편집

이 좋아 내가 지금 고정 된 것 같아요. Try this.

$("#form-email").on('animationend webkitAnimationEnd oAnimationEnd', 
    function(){$('#form-email').removeClass("shake");}); 

'하나'한 번만 해고는 그래서 난 '에'로 변경되었습니다.