Velocity.js Queue 动画队列
2018年2月5日也可以自定义动画队列,但不会立即执行,需要通过dequeue()方法手动执行动画,这有个 Demo 演示了这个过程
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// 自定义队列,这里并不会立即执行 $("div") .velocity({translateX: 75}, {queue: "a"}) .velocity({width: 50}, {queue: "b"}) .velocity({translateY: 75}, {queue: "a"}) .velocity({height: 0}, {queue: "b"}) // 2秒后 执行队列"a"的动画 setTimeout(function () { $("div").dequeue("a"); }, 2000); // 4秒后 执行队列"b"的动画 setTimeout(function () { $("div").dequeue("b"); }, 4000); |
注意:loop循环选项 和reverse反向动画指令,不能和队列一起使用。