jQuery 动画队列

Posted 2021-01-12 ianyanyzx

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 动画队列相关的知识，希望对你有一定的参考价值。

在jQuery对象中，若存在多个动画方法，这些动画方法会逐一排好队依次进行，于是就形成了动画队列

$(‘.btn‘).on(‘click‘,function(){
    $(‘.box‘).hide(function(){
        $(‘.box‘).show()
    })
})

以上的代码等价于下面代码

$(‘.btn‘).on(‘click‘,function(){
    $(‘.box‘).hide()
                .show()
})

jQuery提供了可以操作动画队列的方法：

clearQueue ：从列队中移除所有未执行的项。

finish ：停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。

stop([queue] [,clearQueue] [,jumpToEnd]) ：停止匹配元素当前正在运行的动画。

范例：

  <style>
    .container{
    position:relative;
    }
    .box{
    position:absolute;
    width:100px;
    height:100px;
    background:blue;
    }
  </style>
  <title>动画队列</title>
</head>
<body>
  <button class="btn">漂移</button>
  <button class="btn2">stop</button>
  <button class="btn3">stop(true,false)</button>
  <button class="btn4">stop(false,true)</button>
  <div class="container">
    <div class="box"></div>
  </div>
  <script>
    $(‘.btn‘).on(‘click‘,function(){
      $(‘.box‘).animate({
        top:‘500px‘
      },5000)
      .animate({
        left:‘200px‘
      },6000)
      .animate({
        width:‘200px‘
      },7000)
      .animate({
        height:‘200px‘
      },8000)
    })
    
    $(‘.btn2‘).on(‘click‘,function(){
     $(‘.box‘).stop()
     //不填参数为默认，跳过当前执行的动画，直接进行下个动画
    })
    
    $(‘.btn2‘).on(‘click‘,function(){
     $(‘.box‘).stop()
     //不填参数为默认，跳过当前执行的动画，直接进行下个动画
    })
    
    $(‘.btn3‘).on(‘click‘,function(){
     $(‘.box‘).stop(true)
     //当, clearQueue 为true，清空动画队列
    })
    
    $(‘.btn4‘).on(‘click‘,function(){
     $(‘.box‘).stop(false,true)
     //当, jumpToEnd 为true，直接展示动画最终效果
    })
  </script>

以上是关于jQuery 动画队列的主要内容，如果未能解决你的问题，请参考以下文章

几个非常实用的JQuery代码片段

深入学习jQuery动画队列

jQuery队列动画

十条jQuery代码片段助力Web开发效率提升

jquery 简单菜单翻转（无动画队列）