jQuery动画队列

queue()

queue()方法用来显示在匹配的元素上的已经执行的函数队列

queue([queueName])

queue()方法可以接受一个可选参数——一个含有队列名的字符串。





queue(callback(next))

queue()方法可以接受一个回调函数作为参数,表示将要添加到队列中的新函数
[注意]queue()方法的回调函数中,可以进行样式变换等,但不可以增加动画效果
由下面代码执行结果可以看出,队列执行完函数后,队列后面的动画效果被停止,这时就需要用到下面
要介绍的dequeue()方法





dequeue()

dequeue()方法用来执行匹配元素队列的下一个函数

dequeue([queueName])

dequeue()方法可以接受一个可选参数——一个含有队列名的字符串

[注意]dequeue()方法本身也算队列的一员





clearQueue()

与deQueue()方法相反,clearQueue()方法用来从列队中移除所有未执行的项

[注意]clearQueue()并不影响当前动画效果

clearQueue([queueName])

clearQueue()方法可以接受一个可选参数——一个含有队列名的字符串







.finish

当.finish()在一个元素上被调用,立即停止当前正在运行的动画和所有排队的动画(如果有的话),并且他们的CSS属性设置为它们的目标值(注:就是所有动画的目标值)。所有排队的动画将被删除。(停止当前动画,并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态。)

.stop( [clearQueue ] [, jumpToEnd ] )

停止当前正在运行的动画

  clearQueue(default: false)
  jumpToEnd(default: false)

当一个元素调用.stop(),当前正在运行的动画(如果有的话)立即停止。例如,一个元素用.slideUp()隐藏的时候,调用.stop(),该元素依然会有一部分是处于显示状态的。由于元素上的动画尚未执行完成,所以动画完成时执行的回调函数是不会被调用的。

如果同一元素调用多个动画方法,尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始,直到第一个完成。当调用.stop()的时候,队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行。

如果提供jumpToEnd参数,并且值为true时,当前动画将停止,但该元素上的 CSS 属性会被立刻修改成动画的目标值。用上面的.slideUp()为例子,该元素将立即隐藏。如果提供回调函数将立即被调用。

从jQuery 1.7开始, 如果第一个参数是一个字符串, 那么只有该参数所表示的队列中的动画才会被停止。

   clearQueue(default: false)
   jumpToEnd(default: false)//默认,停止当前动画

   clearQueue(default: true)
   jumpToEnd(default: false)//停在原地,清除队列

   clearQueue(default: false)
   jumpToEnd(default: true)//跳着位移

   clearQueue(default: true)
   jumpToEnd(default: true)//跳到本段位移的末端,清除队列

参考:https://www.cnblogs.com/xiaohuochai/p/5958082.html
https://www.jquery123.com/queue/
https://links.jianshu.com/go?to=http%3A%2F%2Fjs.jirengu.com%2Fpeyexidake%2F1%2Fedit

你可能感兴趣的:(jQuery动画队列)