javascript 带有 addClass 和 removeClass 的 jQuery CSS 动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23449068/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery CSS animations with addClass and removeClass
提问by Miro Rauhala
So, I have now made jQuery Ajax code that checks that the username and password are correct. But instead of just displaying a error message, I'd like to shake the element as well.
所以，我现在制作了 jQuery Ajax 代码来检查用户名和密码是否正确。但是，我不只是显示错误消息，还想摇动该元素。
Define Shake?
定义摇？
That kind of shake that wordpress has. Go to wordpress.com/wp-login.php and fill there some random info and the element shakes.
wordpress 的那种震动。转到 wordpress.com/wp-login.php 并在那里填写一些随机信息，元素会抖动。
That shake can be done by Animate.css.
这种震动可以通过Animate.css来完成。
What's the problem then?
那有什么问题呢？
When the login fails, jQuery makes this.
当登录失败时，jQuery 会这样做。
$('.element').addClass('shake');
$('.element').addClass('shake');
But because the shake element has CSS Animations that run only once, we won't be needing the CSS shake class after it shaked the element.
但是因为shake 元素的CSS Animations 只运行一次，所以在它shake 元素之后我们就不需要CSSshake 类了。
So I tried:
所以我试过：
$('.element').addClass('shake').removeClass('shake');
$('.element').addClass('shake').removeClass('shake');
But that happens all too quickly.
但这一切发生得太快了。
So I tried again:
所以我又试了一次：
$('.element').addClass('shake').delay(1000).removeClass('shake');
$('.element').addClass('shake').delay(1000).removeClass('shake');
Still not play the animation and then remove the class .shakefrom the .element. If the user enters wrong details more then once then shake won't work.
仍然没有播放动画，然后.shake从.element. 如果用户多次输入错误的详细信息，则摇动将不起作用。
You can play with the fiddle here.
你可以在这里玩小提琴。
Goal is to be able to shake the element more then once by clicking the Shake button.
目标是能够通过单击“摇动”按钮多次摇动元素。
回答by Josh Crozier
You could use the following to remove the class when the animation completes.
动画完成后，您可以使用以下内容删除类。
$(function () {
$('button').click(function () {
el = $('.element');
el.addClass('shake');
el.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
function (e) {
el.removeClass('shake');
});
});
});
回答by fjc
Just remove the shake class, add a small time out and then add the shake class. That will make it shake every time:
只需删除抖动类，添加一小段时间，然后添加抖动类。这会让它每次都震动：
$(function(){
$('button').click(function() {
$('.element').removeClass('shake');
setTimeout(function(){
$('.element').addClass('shake');
}, 50);
});
});
});
回答by CRABOLO
addClass()and removeClass()don't respect delay(), so they'll ignore the delay and just do what they were told to like the delay()doesn't exist
addClass()并且removeClass()不尊重delay()，所以他们会忽略延迟，只做他们被告知喜欢delay()不存在的事情
fadeIn()does though.
fadeIn()确实如此。
So if you do this, it should work correctly. This calls the anonymous function to remove class shake after delay and fadeIn have finished.
所以如果你这样做，它应该可以正常工作。这将调用匿名函数以在延迟和淡入淡出完成后移除类抖动。
$('.element').addClass('shake').delay(1000).fadeIn(0, function() { $(this).removeClass('shake'); });
