jquery: addClass, removeClass: анимация работает только один раз: почему?

Question

Когда я использую это:

$("#passwordConfig").removeClass('shake animated').addClass('shake animate'); 

Это работает только один раз.

Мне нужно добавить немного времени, чтобы заставить его работать столько раз, сколько я хочу!

$("#passwordConfig").removeClass('shake animated'); 
        setTimeout(function() { 
         $("#passwordConfig").addClass('shake animated'); 
        }, 50); 

Любая идея, почему?

CSS:

.animated { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
} 

@-webkit-keyframes shake { 
    0%, 100% { 
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    } 

    10%, 30%, 50%, 70%, 90% { 
    -webkit-transform: translate3d(-10px, 0, 0); 
    transform: translate3d(-10px, 0, 0); 
    } 

    20%, 40%, 60%, 80% { 
    -webkit-transform: translate3d(10px, 0, 0); 
    transform: translate3d(10px, 0, 0); 
    } 
} 

@keyframes shake { 
    0%, 100% { 
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    } 

    10%, 30%, 50%, 70%, 90% { 
    -webkit-transform: translate3d(-10px, 0, 0); 
    transform: translate3d(-10px, 0, 0); 
    } 

    20%, 40%, 60%, 80% { 
    -webkit-transform: translate3d(10px, 0, 0); 
    transform: translate3d(10px, 0, 0); 
    } 
} 

.shake { 
    -webkit-animation-name: shake; 
    animation-name: shake; 
} 

Answer 1

Это происходит потому, что removeClass и addClass происходит так быстро, что не позволяет DOM нагнать на слово. Вы можете сделать что-то вроде этого, если вы действительно ненавидите SetTimeout:

$("#passwordConfig").removeClass('shake animated').delay(50).queue(
    function (next) { 
     $(this).addClass('shake animated'); 
     next(); 
    } 
); 

http://jsfiddle.net/51dwhd2o/

Переключить класс тоже хорошо, но, кажется, как она будет работать только каждый второй вызов тумблера.