Javascript Velocity.js：在第一组对象完成后设置第二组对象的动画

我正在尝试设置一系列SVG对象的动画。以下是基本目标：第一组4个对象先在中设置动画，然后在中设置动画，然后在中设置下一组对象的动画。虽然前两个队列排得很好，但我不确定让第二组等待第一组完成的最佳方法

这是我的密码：

JS:

更新：这是我的解决方案，但我很担心使用延迟而不是排队方法

$( document ).ready(function() {
        $('.dt0,.dt1,.dt2,.dt3').velocity("transition.expandIn", {stagger: 200, drag: true });
        $('.dt0,.dt1,.dt2,.dt3').velocity("transition.expandOut", {stagger: 200, drag: true, delay: 1000 });
        $('.tr0,.tr1,.tr2,.tr3').velocity({opacity: 0}, {duration:0 });
        $('.tr0,.tr1,.tr2,.tr3').velocity("transition.expandIn", {stagger: 200, drag: true, delay: 3000 });
        })

使用回调

$('.dt0').velocity({
  opacity: 0 //or animation name
 }, {
 complete: function(elements) { 
  $('.dt1').velocity({
    opacity: 0 //or animation name
   }, {
   complete: function(elements) { 
    //... the others
   },{duration:200, delay:2000 } //2s delay
   });
 },{duration:1000 }
});

$('.dt0').velocity({
  opacity: 0 //or animation name
 }, {
 complete: function(elements) { 
  $('.dt1').velocity({
    opacity: 0 //or animation name
   }, {
   complete: function(elements) { 
    //... the others
   },{duration:200, delay:2000 } //2s delay
   });
 },{duration:1000 }
});