我正在raphaeljs上建立一個運行燈庫。在下面的代碼示例中,我試圖遍歷5個塊中的一組圓,並單獨爲塊設置動畫。JavaScript參數更改值?
我不明白的是爲什麼x在第一次警報中的值爲1,並在將其傳遞給淡入淡出功能後變爲2。任何想法爲什麼?我必須通過無法弄清楚的東西來忽略某些東西......謝謝!後for
環路(在每個動畫步驟結束)已退出
Raphael(function() {
var r = Raphael("Test"),
run = document.getElementById("run"), set = r.set(r.circle(62, 100, 6),
r.circle(125, 100, 3), r.circle(139, 100, 3),
r.circle(153, 100, 3), r.circle(167, 100, 3),
r.circle(181, 100, 3), r.circle(195, 100, 3),
r.circle(209, 100, 3), r.circle(223, 100, 3),
r.circle(237, 100, 3), r.circle(251, 100, 3),
r.circle(265, 100, 3), r.circle(279, 100, 3),
r.circle(293, 100, 3), r.circle(307, 100, 3),
r.circle(321, 100, 3), r.circle(334, 100, 3),
r.circle(348, 100, 3), r.circle(362, 100, 3),
r.circle(376, 100, 3), r.circle(390, 100, 3)).attr({
stroke : "none",
fill : "#e6e6e6"
}),
fade = function(obj, id, x) {
alert('passed x = ' + x);
return function() {
obj[(5 * x) - id].attr({
fill : "#49719b",
r : 4
}).animate({
fill : "#e6e6e6",
r : 3
}, 400);
};
};
run.onclick = function() {
var i = 0;
while (i <= 0) {
for (x = 1; x <= 1; x++) {
alert('initial x = ' + x);
setTimeout(function() {
set[0].animate({
"20%" : {
callback : fade(set, 0, x)
},
"40%" : {
callback : fade(set, 1, x)
},
"60%" : {
callback : fade(set, 2, x)
},
"80%" : {
callback : fade(set, 3, x)
},
"100%" : {
callback : fade(set, 4, x)
}
}, 650);
}, i * 650);
}
i++;
}
};
});
大謝謝你,它的工作現在。但我真的不明白這裏發生了什麼。你把setTimeout調用放在一個函數中,以確保x隨時間保持它的值?語法用函數(x){...}(x)做什麼? – 2012-04-02 08:47:41
這個語法讓你在定義後立即調用一個匿名函數。我將x作爲參數傳遞給此函數。 – 2012-04-02 10:15:41