Traduire (progressivement – avec animer) un élément svg après un délai utilisant jQuery

J’ai ces cubes que je souhaite traduire en un point X et Y différent après un délai de 3000, par exemple. Je ne sais pas comment faire cela avec l’aide de jQuery. Voici un JS Fiddle . Ci-dessous le 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 }); } 

Merci d’avance.

PS: Désolé de ne pas être clair. Je viens de faire une modification à la question.

Eh bien c’est possible. Je viens d’apporter quelques modifications à votre setTimeOut . Vérifiez si c’est ce que vous voulez:

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

Voici la démo

Vous pouvez essayer quelque chose comme ça

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

Ajoutez tous les éléments dans la fonction setTimeout et essayez.

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