javascript - 使用 jQuery 在延迟后翻译(逐渐 - 使用动画)svg 元素

Question

我有这个立方体，我想在延迟 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:抱歉没说清楚。我刚刚对问题进行了编辑。

Answer 1

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

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

这是 DEMO