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

先来看看要实现的效果图

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

总结

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