Question

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

    }
}

我不是在脚本结束时同时淡化所有图标，而是如何逐个遍历它们并逐个淡入它们，两者之间稍有延迟？

Answer 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();
}

循环使用一些SVG元素

1 个答案: