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

    }
}

而不是像我在脚本末尾所做的那样同时淡入所有图标，我如何循环遍历它们并将它们逐个淡入，并在两者之间稍有延迟？

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 回答