利用Jquery队列实现根据输入数量显示的动画

时间：2021-05-25

先来看看要实现的效果图

如上面的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>

总结

以上就是这篇文章的全部内容，感兴趣的朋友们自己运行操作下会更容易理解，如果有疑问可以留言交流，希望这篇文章对大家能有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章