美文网首页
jQuery 动画队列

jQuery 动画队列

作者: 饥人谷_阿银 | 来源:发表于2019-04-25 22:00 被阅读0次

    动画队列可以说是动画执行的一个顺序机制,当我们对一个对象添加多次动画效果时后,添加的动作就会被放入这个动画队列中,等前面的动画完成后再开始执行。

    image

    动画队列机制和执行顺序

    1. 对于一组元素上的动画效果,有如下两种情况:
    • 当在一个animate()方法中应用多个属性时,动画是同时发生的。
    • 当以链式的写法应用动画方法时,动画是按照顺序发生的。
    1. 对于多组元素上的动画效果,有如下情况:
    • 默认情况下,动画都是同时发生的。
    • 当以回调的形式应用动画方式时,动画是按照回调顺序发生的。

    即参考之前的 回调同步、异步。

    以上是整个动画的调度一个流程,其实都是利用队列异步的空闲然后执行同步的代码,这样在处理上是没有浪费资源的,而且精确度也是最高的。

    自定义动画

    当基础效果、渐变效果、滑动效果动画不能满足需求的时候,jQuery 提供了自定义动画行为的方法

    .animate( properties [, duration ] [, easing ] [, complete ] )

    properties是一个 CSS属性和值 的对象,动画将根据这组对象移动。

    $('#btn4').click(function(){
      $('.box').animate({
        left: '150px'
      },1000)
      .animate({
        left: '150px',
        top: '150px'
      },1000)
      .animate({
        left: '0',
        top: '150px'
      },1000)
      .animate({
        left: '0',
        top: '0'
      },1000)
    })
    

    .clearQueue()

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

    .stop( [clearQueue ] [, jumpToEnd ] )

    停止当前正在运行的动画
    里面的参数

    • clearQueue:即是.clearQueue()方法,决定是否清楚 动画队列 中未执行的动画
    • jumpToEnd:即是决定是否展示当前一帧动画是否执行到最后

    这两个参数默认都为false
    .stop()等同于.stop(false,false)

    .stop(false,false)

    动画序列中共有 4 个序列,当执行到 动画序列2 的时候 使用.stop(),序列2 立即停止,并执行 动画序列3 ,执行完之后,执行动画序列4。

    image

    .stop(true,false)

    动画序列中共有 4 个序列,当执行到 动画序列2 的时候 使用.stop(true,false),序列2 立即停止,由于参数 [clearQueue]true 因此后面的也动画序列也全部清空,不会再往下执行动画序列。因此动画会停留在 动画序列2 .stop(true,false)的地方。

    image

    .stop(true,true)

    动画序列中共有 4 个序列,当执行到 动画序列2 的时候 使用.stop(true,true),由于参数 [clearQueue]true 因此后面的也动画序列也全部清空,不会再往下执行动画序列。由于参数 [jumpToEnd]也是 true ,因此 最后会停留在 动画序列2 本身应该结束的位置。

    image

    .finish()

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

    image

    相关文章

      网友评论

          本文标题:jQuery 动画队列

          本文链接:https://www.haomeiwen.com/subject/podbgqtx.html