使用 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

你可以试试这样的

$("#cubeTop").attr({
    transform:'translate(0,-140)'
})

// code for fade in one by one
console.log("game begins");
allSVGs = $("g");
fadeIn(0);
setTimeout(function () {
    $("#cubeTop").attr({
        transform:'translate(0,-140)'
    })
}, 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
    });
}

svg {
    position: absolute;
    left: 0;
    top: 0;
}
#cube {
    fill: none;
    stroke: black;
    cursor: pointer;
    display: none;
}
#cubeTop {
    fill: none;
    stroke: black;
    cursor: pointer;
    display: none;
}
#cubeTopRight {
    fill: none;
    stroke: red;
    cursor: pointer;
    display: none;
}
#cubeTopRightDown {
    fill: none;
    stroke: black;
    cursor: pointer;
    display: none;
}
#cubeDown {
    fill: none;
    stroke: red;
    cursor: pointer;
    display: none;
}
#cubeLeftDown {
    fill: none;
    stroke: black;
    cursor: pointer;
    display: none;
}
#cubeLeft {
    fill: none;
    stroke: red;
    cursor: pointer;
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<svg height="100%" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg">
    <g id="cube">
        <path id="f1" d="M190,200L260,160L330,200L260,240L190,200"></path>
        <path id="f2" d="M260,240L330,200L330,280L260,320L260,240"></path>
        <path id="f3" d="M260,240L260,320L190,280L190,200L260,240"></path>
    </g>
    <g id="cubeTop" transform="translate(0, -80)">
        <path id="t1" d="M190,200L260,160L330,200L260,240L190,200"></path>
        <path id="t2" d="M260,240L330,200L330,280L260,320L260,240"></path>
        <path id="t3" d="M260,240L260,320L190,280L190,200L260,240"></path>
    </g>
    <g id="cubeTopRight" transform="translate(70, -40)">
        <path id="r1" d="M190,200L260,160L330,200L260,240L190,200"></path>
        <path id="r2" d="M260,240L330,200L330,280L260,320L260,240"></path>
        <path id="r3" d="M260,240L260,320L190,280L190,200L260,240"></path>
    </g>
    <g id="cubeTopRightDown" transform="translate(70, 40)">
        <path id="rd1" d="M190,200L260,160L330,200L260,240L190,200"></path>
        <path id="rd2" d="M260,240L330,200L330,280L260,320L260,240"></path>
        <path id="rd3" d="M260,240L260,320L190,280L190,200L260,240"></path>
    </g>
    <g id="cubeDown" transform="translate(0, 80)">
        <path id="cd1" d="M190,200L260,160L330,200L260,240L190,200"></path>
        <path id="cd2" d="M260,240L330,200L330,280L260,320L260,240"></path>
        <path id="cd3" d="M260,240L260,320L190,280L190,200L260,240"></path>
    </g>
    <g id="cubeLeftDown" transform="translate(-70, 40)">
        <path id="ld1" d="M190,200L260,160L330,200L260,240L190,200"></path>
        <path id="ld2" d="M260,240L330,200L330,280L260,320L260,240"></path>
        <path id="ld3" d="M260,240L260,320L190,280L190,200L260,240"></path>
    </g>
    <g id="cubeLeft" transform="translate(-70, -40)">
        <path id="l1" d="M190,200L260,160L330,200L260,240L190,200"></path>
        <path id="l2" d="M260,240L330,200L330,280L260,320L260,240"></path>
        <path id="l3" d="M260,240L260,320L190,280L190,200L260,240"></path>
    </g>
</svg>

Answer 2

在 setTimeout 函数中添加所有内容并尝试。

// code for fade in one by one
setTimeout(function() {
    console.log("game begins");
    allSVGs = $("g");
    fadeIn(0);

    $("#cubeTop").animate({
        svgTransform: "translate(0, -160)"
    });


    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
        });
    }
}, 3000);

Answer 3

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

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

这里是DEMO