Looping through some SVG elements
<p>I have some icons from Raphaël.js, and I would like to fade them in sequentially on page load.</p>

<p>Here I build the icons:</p>

<pre><code>function navBar() {
    var icon={/* lots of path strings */},
    fill = {
        fill:"#666",
        stroke:"none",
        opacity:0 // opacity is initially 0; would like to loop through this
    },
    stroke = {
        stroke:"#fff",
        "stroke-width":3,
        "stroke-linejoin":"round",
        opacity:0
    };

    for (var name in icon) {
        var r = Raphael(0, 0, 40, 40),
            s = r.path(icon[name]).attr(stroke).translate(4, 4),
            Icon = r.path(icon[name]).attr(fill).translate(4, 4),
            Path = document.getElementById("path"),
            none = {fill: "#000", opacity: 0};

        (function (icon, path, s, name) {
            r.rect(0, 0, 38, 38).attr(none).hover(function () {
                s.stop().animate({opacity: 1}, 200);
            }, function () {
                s.stop().attr({opacity: 0});
            });
        })(Icon, icon[name], s, name);


        // Here I'm able to fade all of the icons in at the same time
        (function (icon) {          
            Icon.animate({opacity:1},200);
        })(Icon);

    }
}
</code></pre>

<p>Rather than fade all of the icons in at the same time as I've done at the end of the script,  how can I loop through them and fade them each in, one by one, with a slight delay in between?</p>
