0

Raphaël.jsのアイコンがいくつかありますが、ページの読み込み時に順番にフェードインしたいと思います。

ここでアイコンを作成します。

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

    }
}

スクリプトの最後で行ったのと同時にすべてのアイコンをフェードインするのではなく、アイコンをループして、少し遅れて1つずつフェードインするにはどうすればよいですか？

4

1 に答える 1

1

opr を作成した後にそれらをアニメートする必要があるかもしれません。終わらせる。ここにシミュレーションがあります: http://jsfiddle.net/r75hh/

このように。

// creating
var icon = new Raphael ...
...
icon.attr("rel", "icon")

// the last line in navBar()
animateIcons();


// animating
function animateIcons() {
    // assuming jQuery in use
    var icons = $("elementTagNameOfIcon[rel='icon']");
    var i = 0;
    var f = function(){
        var icon = icons.get(i);
        if (icon) {
            $(icon).animate({opacity:1}, 200, function(){
                f();
            });
            i++;
        }
    };
    f();
}
于 2012-08-15T12:42:52.687 に答える