I can think no more. I would appreciate if someone could help me get through this problem. I have, say, 6 cubes, which I want to fade in one by one to the screen and then spread out simultaneously. I am making use of fadeIn and animate method. Here is my code,
HTML
<div id="parentBox">
<svg id="polyWhite" width="200" height="270" viewBox="0 0 512 606">
<g>
<polygon points="256,343 47,195 256,55 465,195" class="top-white" />
<polygon points="256,343 465,195 465,480 256,627" class="right-white" />
<polygon points="256,343 256,627 47,480 47,195" class="left-white" />
</g>
</svg>
<svg id="polyBlack" width="200" height="270" viewBox="0 0 512 606">
<g>
<polygon points="256,343 47,195 256,55 465,195" class="top-black" />
<polygon points="256,343 465,195 465,480 256,627" class="right-black" />
<polygon points="256,343 256,627 47,480 47,195" class="left-black" />
</g>
</svg>
<svg id="polyRedTwo" width="200" height="270" viewBox="0 0 512 606">
<g>
<polygon points="256,343 47,195 256,55 465,195" class="top-red-two" />
<polygon points="256,343 465,195 465,480 256,627" class="right-red-two" />
<polygon points="256,343 256,627 47,480 47,195" class="left-red-two" />
</g>
</svg>
<svg id="polyBlackTwo" width="200" height="270" viewBox="0 0 512 606">
<g>
<polygon points="256,343 47,195 256,55 465,195" class="top-black-two" />
<polygon points="256,343 465,195 465,480 256,627" class="right-black-two" />
<polygon points="256,343 256,627 47,480 47,195" class="left-black-two" />
</g>
</svg>
<svg id="polyRedThree" width="200" height="270" viewBox="0 0 512 606">
<g>
<polygon points="256,343 47,195 256,55 465,195" class="top-red-three" />
<polygon points="256,343 465,195 465,480 256,627" class="right-red-three" />
<polygon points="256,343 256,627 47,480 47,195" class="left-red-three" />
</g>
</svg>
<svg id="polyBlackThree" width="200" height="270" viewBox="0 0 512 606">
<g>
<polygon points="256,343 47,195 256,55 465,195" class="top-black-three" />
<polygon points="256,343 465,195 465,480 256,627" class="right-black-three" />
<polygon points="256,343 256,627 47,480 47,195" class="left-black-three" />
</g>
</svg>
<svg id="polyRed" width="200" height="270" viewBox="0 0 512 606">
<g>
<polygon points="256,343 47,195 256,55 465,195" class="top" />
<polygon points="256,343 465,195 465,480 256,627" class="right" />
<polygon points="256,343 256,627 47,480 47,195" class="left" />
</g>
</svg>
</div>
jQuery
$("svg").each(function(index) {
$(this).delay(400 * index).fadeIn(300);
});
$("#polyRed").delay(2000).stop().animate({
left: "-23",
top: "9"
});
$("#polyBlack").delay(2000).stop().animate({
left: "140",
top: "-102"
});
$("#polyBlackThree").delay(2000).stop().animate({
left: "-22",
top: "233"
});
$("#polyBlackTwo").delay(2000).stop().animate({
left: "304",
top: "233"
});
$("#polyRedTwo").delay(2000).stop().animate({
left: "305",
top: "10"
});
$("#polyRedThree").delay(2000).stop().animate({
left: "140",
top: "345"
});
I get the animation simultaneously, but then I lose the delay in fadeIn. Some jQuery experts can help me with what is going wrong.
They are asynchronous in execution. You have to call the next animation (by opacity is just same as using fadeIn) at the end of the previous element's animation.
This would help you I guess
var allSVGs = $("svg");
fadeIn(0);
....
function fadeIn(svgIndex){
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.
}});
}
Edit See this jsFiddle Link. I just commented the other areas of code to make things little easier...