jQuery动画队列

作者: 东郭皮蛋 | 来源:发表于2019-03-10 17:43 被阅读0次

jQuery 动画队列
jQuery动画队列
jQuery动画队列
jQuery动画队列
jQuery动画队列
jQuery动画队列
jQuery 动画队列
jQuery动画队列
jQuery动画队列
jQuery动画队列

我们知道jQuery提供了以下几种方法来操作动画队列：

stop([clearQuery],[gotoEnd]):停止当前jQuery对象里每个DOM元素上正在执行的动画。
queue([queueName,]callback):将callback动画数添加到当前jQuery对象里所有DOM元素的动画函数队列的尾部。
queue([queueName,]naeQueue):用newQueue动画函数队列代替当前jQuery对象里所的DOM元素的动画函数队列。
dequeue():执行动画函数队列头的第一个动画函数，并将该动画函数移出队列。
clearQueue([queueName]):清空动画函数队列中的所有动画函数。

例子：

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .box {
  top: 30px;
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: #aaa;
}
body {
  position: relative;
}
span {
  margin-right: 10px;
}
  </style>
</head>
<body>
 <span>动画序列剩余</span><span class="num">0</span><span>部分</span>
<div class="box">点击灰色部分开始动画</div>
  <script>
    function runIt(){
  //启动获取动画队列进度
  showIt();
  //动画第一部分
  $('.box').animate({
    left: '+=100',
    width: '100'
  },600)
  //动画第二部分
  $('.box').animate({
    top: '+=100',
    height: '100'
  },600)
  //动画第三部分
  $('.box').animate({
    left: '-=100',
    width: '200'
  },600)
  //动画第四部分
  $('.box').animate({
    top: '-=100',
    height: '200'
  },600)
  //动画第五部分
  $('.box').slideUp(600)
  //动画第六部分
  $('.box').slideDown(600,runIt)
}
function showIt(){
  var num = $('.box').queue().length;//获取动画队列剩余长度
  $('.num').text(num);
  setTimeout(showIt,10)//设置循环更新动画队列的进展
}
$('.box').on('click',runIt)//当点击box的时候，开始启动动画
  </script>
</body>
</html>