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