0
我有一些來自Raphaël.js的圖標,我希望在頁面加載時順序淡入淡出。循環播放一些SVG元素
這裏我建的圖標:
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);
}
}
而不是在同一時間消失的所有圖標,因爲我已經在腳本的最後完成,我怎麼能環通過他們和他們褪色每個人都在一個接一個地稍微延遲一段時間?