动画队列

jquery中的animate的自定义动画中,含有动画队列的感念。将所要执行的动画按一个个的排列成一队,并先后顺序的一个个的执行。这篇文章用于讲述动画队列的大致指令及功能。


.animate

虽然只是使用.animate( properties [, duration ] [, easing ] [, complete ] )这个指令就能完成动画队列,但是其中就能衍生出无数的可能性,主要还是要靠使用者的创造力来展现不一样的动画队列。


clearQueue

清除动画队列中未执行的动画


.finish

停止当前动画,并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态


.stop( [clearQueue ] [, jumpToEnd ] )

停止当前正在运行的动画

clearQueue(default: false)

jumpToEnd(default: false)


范例:

$('#btn6').click(function(){

    //停止当前动画$('.box').stop()

 })

 $('#btn7').click(function(){

//停止当前动画,并清除未执行的动画队列

$('.box').stop(true,false) 

 })

 $('#btn8').click(function(){

//停止当前动画,并清除未执行的动画队列,并且当前动画展示最终状态

$('.box').stop(true,true)

 }) 

 $('#btn9').click(function(){

//停止当前动画,并清除未执行的动画队列,并且当前动画展示最终状态

$('.box').finish()

 })

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 队列实现是jQuery非常棒的一个拓展,使用动画队列可以使动画更容易实现。 .animate( propertie...
    初入前端的小菜鸟阅读 287评论 0 0
  • 动画队列 什么是 jQuery 的动画队列?首先,我们先来了解一下什么是队列。队列是一种特殊的线性表,只允许在表的...
    有点孤僻阅读 593评论 0 0
  • 动画队列 队列的作用就是让我们把一个又一个的任务放到一起,确保只有当前面的任务完成了,才会开始下一个任务。这里面的...
    Hsienfeng阅读 448评论 0 0
  • 为元素btn绑定一个动画效果,先向右移动300px,再向下移动300px,再向左移动300px,再向上移动300p...
    薛小皮阅读 228评论 0 0
  • 10月24日精进。今日体验,今天客户咨询处理违章的事情,由于其他原因想找人代办处理。客户这种原因只能是本人到场才能...
    吕志刚l阅读 84评论 0 0