利用Jquery队列实现根据输入数量显示的动画
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了利用Jquery队列实现根据输入数量显示的动画，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4205字，纯文字阅读大概需要7分钟。
内容图文
先来看看要实现的效果图
如上面的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>
<span class="animate2 animate"></span>
<span class="animate3 animate"></span>
<span class="animate4 animate"></span>
<span class="animate5 animate"></span>
<span class="animate6 animate"></span>
<div class="up"></div>
</div>
<div id="btn"></div>
<button id="btnTrg">click me</button>
<input type="text" class="number" id="num"/>
<span class="result"></span>
</body>
<script>
var span1=$(".animate1");
var span2=$(".animate2");
var span3=$(".animate3");
var span4=$(".animate4");
var span5=$(".animate5");
var span6=$(".animate6");
var box=$("#content");
var btn=$("#btn");
var btnTrg=$("#btnTrg");
var input=$("#num");
var result=$(".result");
var resultNum=1;
var ani=[
function () {
span1.css({
background:"red",
opacity:1
}).animate({
left:-300,
top:-100
}, function () {
result.html(resultNum++)
}).animate({
left:-50,
top:-450,
opacity:0.2
}, function () {
$(this).css({
left:0,
top:0,
opacity:0
})
})
},
function () {
span2.css({
background:"blue",
opacity:1
}).animate({
left:-200,
top:-200
}, function () {
result.html(resultNum++)
}).animate({
left:-50,
top:-450,
opacity:0.2
}, function () {
$(this).css({
left:0,
top:0,
opacity:0
})
})
},
function () {
span3.css({
background:"pink",
opacity:1
}).animate({
left:-100,
top:-300
}, function () {
result.html(resultNum++)
}).animate({
left:-50,
top:-450,
opacity:0.2
}, function () {
$(this).css({
left:0,
top:0,
opacity:0
})
})
},
function () {
span4.css({
background:"green",
opacity:1
}).animate({
left:100,
top:-300
}, function () {
result.html(resultNum++)
}).animate({
left:50,
top:-450,
opacity:0.2
}, function () {
$(this).css({
left:0,
top:0,
opacity:0
})
})
},
function () {
span5.css({
background:"orange",
opacity:1
}).animate({
left:200,
top:-200
}, function () {
result.html(resultNum++)
}).animate({
left:50,
top:-450,
opacity:0.2
}, function () {
$(this).css({
left:0,
top:0,
opacity:0
})
})
},
function () {
span6.css({
background:"black",
opacity:1
}).animate({
left:300,
top:-150
}, function () {
result.html(resultNum++)
}).animate({
left:50,
top:-450,
opacity:0.2
}, function () {
$(this).css({
left:0,
top:0,
opacity:0
})
})
}
];
var queue;
var len=0;
var flag=0;
var timer;
input.on("keyup", function () {
var result=[];
var value=input.val();
len=value;
if(flag>=len){
clearInterval(timer);
}
if(value<6){
result =ani.slice(0,value);
queue=$.queue(box,"animate",result);
}else if(value>6){
var num1=Math.floor(value/6);
var num2=value%6;
for(var i=0;i<num1;i++){
result=result.concat(ani);
}
result=result.concat(ani.slice(0,num2));
console.log(result);
$.queue(box,"animate",result);
}
});
btnTrg.on("click", function () {
resultNum=0;
flag=0;
timer=setInterval(function () {
flag++;
console.log(flag);
$.dequeue(box,"animate");
},500);
})
</script>
</html>
总结
以上就是这篇文章的全部内容，感兴趣的朋友们自己运行操作下会更容易理解，如果有疑问可以留言交流，希望这篇文章对大家能有所帮助。
内容总结
以上是互联网集市为您收集整理的利用Jquery队列实现根据输入数量显示的动画全部内容，希望文章能够帮你解决利用Jquery队列实现根据输入数量显示的动画所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】