标签：列队 anim pre 直接 UNC query back false body
在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>
标签：列队 anim pre 直接 UNC query back false body
原文地址：https://www.cnblogs.com/ianyanyzx/p/9789278.html
