javascript - 使用jQuery延迟后翻译(逐步-带有动画)一个svg元素

我有这个多维数据集，我想在说了3000秒的延迟后转换为另一个X和Y点。我无法理解如何借助jQuery做到这一点。这是JS Fiddle。下面是代码。

JS

// code for fade in one by one
console.log("game begins");
allSVGs = $("g");
fadeIn(0);
setTimeout(function () {
    $("#cubeTop").animate({
        svgTransform: "translate(0, -160)"
    });
}, 3000);

function fadeIn(svgIndex) {
    console.log(svgIndex);
    allSVGs.eq(svgIndex).css({
        "display": "block",
            "opacity": "0"
    });
    allSVGs.eq(svgIndex).animate({
        "opacity": "1"
    }, {
        complete: function () {
            svgIndex++;
            if (svgIndex < allSVGs.length) //Making sure we don't exceed the maximum available SVG elements
            fadeIn(svgIndex); //Recursively calling the next elements animation (hide) from the completed one.
        },
        duration: 400
    });
}

提前致谢。

PS：很抱歉，不清楚。我刚刚对问题进行了编辑。

最佳答案

好吧，那是可能的。我刚刚对您的setTimeOut进行了一些更改。检查这是否是您想要的：

setTimeout(function () {
     $("#cubeTop")
    .animate(
      {"min-height": -140},
      {duration: 1000,
       step: function( top ){
           this.setAttribute("transform", "translate(0,"+top+")");
         }
       });
}, 3000);

这是DEMO