先来看看要实现的效果图
如上面的gif图所示，可以在输入框中，输入要产生的动画的数量，然后点击click me按钮，就产生了效果。产生的效果是通过在数组中预设的几种。这里为了演示方便，没有设置具体的形状，比如可以更换为一些其它的iconfont来实现效果。
实现思路
通过
$.queue和
$.dequeue来实现动画队列的存取与取出实现效果。首先通过按照
input输入的数字来形成对应数量效果对象的数组。然后在把数组存放到
$.queue中，最后通过
click me按钮触发，一个一个取出动画序列，实现动画。注意
这里要注意的是，在一个一个取出动画的时候，用到了
setInterval，不需要的时候一定要清除计时器，否则会影响序列，不停的取出。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="/jquery-2.1.4.min.js" type="text/javascript"></script>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 50px;
height: 50px;
border: 1px solid slateblue;
position: relative;
left: 750px;
top: 500px;
}
.animate{
width: 50px;
height: 50px;
border: 1px solid skyblue;
background: slateblue;
opacity: 0;
position: absolute;
}
.up{
z-index: 999;
background: red;
width: 50px;
height: 50px;
border: 1px solid skyblue; }
#btn{
background: slateblue;
position: absolute;
left: 0;
top: 0;
}
.number{
position: absolute;
top: 600px;
left: 740px;
width: 100px;
height: 30px;
}
#btnTrg{
background: slateblue;
width: 100px;
height: 30px;
border: 0;
position: absolute;
top: 600px;
left: 600px;
}
.result{
position: absolute;
top: 600px;
left: 900px;
width: 100px;
height: 30px;
background: skyblue;
text-align: center;
}
</style>
</head>
<body>
<div id="content"></div>
<div class="box">
<span class="animate1 animate"></span>
