使用jQuery延迟后翻译(逐步-带有动画)一个svg元素 [英] Translate (gradually - with animate) an svg element after a delay using jQuery

问题描述

我有这个多维数据集，我想在延迟3000秒后转换为不同的X和Y点.我无法理解如何借助jQuery做到这一点.这是 JS小提琴.下面是代码.

I have this cubes which I want to translate to a different X and Y point after a delay of say 3000. I am not able to understand how to do this with the help of jQuery. Here is a JS Fiddle. Below is the code.

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:很抱歉，不清楚.我刚刚对问题进行了编辑.

PS: Sorry for not being clear. I just made an edit to the question.

推荐答案

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

Well it is possible. I just made some changes to your setTimeOut. Check if this is what you want:

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

这是 演示

Here is the DEMO

这篇关于使用jQuery延迟后翻译(逐步-带有动画)一个svg元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！