# **使用jQuery给元素动态添加动画效果案例**
```
$('.sub').click(function () {
//给元素添加抖动动画
animateCSS('.login','shake',function () {
//让元素以抖动消失
animateCSS('.login','bounceOut',function(){
//让动画bounceOut结束时，隐藏元素
$('.login').hide()
})
})
})
//https://daneden.github.io/animate.css这个方法是这里来的
//给元素添加类名（动画），动画完成后再将其添加的类名删除
function animateCSS(element, animationName, callback) {
const node = document.querySelector(element)
node.classList.add('animated', animationName)
function handleAnimationEnd() {
//删除类名
node.classList.remove('animated', animationName)
//删除监听事件
node.removeEventListener('animationend', handleAnimationEnd)
//有回调就执行回调函数
if (typeof callback === 'function') callback()
}
node.addEventListener('animationend', handleAnimationEnd)
}
```
:-: 使用jQuery给元素动态添加动画效果案例
:-: 
:-:
解决再点击按钮再继续动画效果
```
$(function () {
$('input:submit').click(function () {
// $('.login').addClass('animated shake')
/*setTimeout(function () {
$('.login').removeClass('animated shake')
},1000)*/
/* setTimeout(function () {
location.reload()
},1000)*/
/* $('login').on('animationend',function(){
$('login').removeClass();
})*/
animateCSS('.login','shake',function () {
animateCSS('.login','bounce',function () {
animateCSS('.login','swing')
})
})
})
```
