Translate (gradually - with animate) an svg element after a delay using jQuery

问题

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

Thanks in advance.

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

回答1:

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

回答2:

You can try something like this

$("#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>

回答3:

Add all the stuff in setTimeout function and try.

// 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);

来源：https://stackoverflow.com/questions/29667004/translate-gradually-with-animate-an-svg-element-after-a-delay-using-jquery