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

2019-11-20 09:06:52

字体：大中小

来源：转载

供稿：网友

先来看看要实现的效果图

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

总结

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

上一篇：JS实现列表的响应式排版(推荐)

下一篇：JavaScript中子对象访问父对象的方式详解