Javascript動畫級別：初學者

-1

我正在嘗試學習Javascript動畫，但是，正如我想的那樣，它不起作用xD。Javascript動畫級別：初學者

修訂DELETING糊化MISTAKES

我試圖

function click_home() 
{ 
    for(i=0;i<=10;i++) 
    { 
     setTimeout(setOpacity("div_home",i),200); 
    } 
}; 

function setOpacity(id,value) { 
    document.getElementById(id).style.opacity = value/10; 
    document.getElementById(id).style.filter = 'alpha(opacity=' + value*10 + ')'; 
};

和HTML：

<td id="button_home" onclick="click_home();"> Home </td>

但顯然是錯誤的。我能做些什麼來做到這一點？:) 感謝所有答覆:)

來源

2012-02-14 Bonny1992

我寫了「大家好：d」爲開頭的xD – Bonny1992 2012-02-14 14:02:54

你需要告訴我們_why_這是錯的;什麼是不做你想做的事，它目前展現了什麼樣的行爲？ – Bojangles 2012-02-14 14:04:57

而不是div_home我認爲它應該是button_home – Pranav 2012-02-14 14:05:49

首先，你得在for環路（改,到;）語法錯誤。

您需要將一個函數傳遞給setTimeout，因此它可以定期執行它。您當前通過的setTimeout是執行setOpacity("div_home",i)（即undefined）的結果。

function click_home() 
{ 
    for(i=0;i<=10;i++) 
    { 
     setTimeout(function() { 
      setOpacity("div_home",i) 
     }, 200); 
    } 
};

什麼，你還會發現是你的i值總是最終成爲最後的值，因爲i範圍的，要解決這個問題，你需要添加一個新的作用域級別。有關此問題的更詳細的說明，請參閱How to reference right value of `i` in a callback in a loop?

function click_home() 
{ 
    function delay(i) { 
     setTimeout(function() { 
      setOpacity("div_home",i) 
     }, 200); 
    } 

    for(i=0;i<=10;i++) 
    { 
     delay(i); 
    } 
};

正如在評論中指出，你會發現所有您超時後爲200ms將執行..讓你需要錯開動畫執行。最簡單的方法是在延遲計算中添加i;即25 * i。

我不知道爲什麼你的opacity和filter設置爲0第一在setOpacity功能;這些重置將立即被設置爲以下值。

你也應該看看緩存document.getElementById(id).style的結果，因爲你正在查找它4次（如果你刪除上面描述的不需要的重置，將會是2）。

function setOpacity(id,value) { 
    var style = document.getElementById(id).style; 

    style.opacity = value/10; 
    style.filter = 'alpha(opacity=' + value*10 + ')'; 
};

來源

2012-02-14 14:04:44 Matt

由於所有更改都將在200 ms後發生，因此不會出現任何情況，而是立即進行不透明跳轉。更改200到我* 20 – Dave 2012-02-14 14:12:14

不，這一個不適合我... 我認爲這是';'在'setOpacity（「div_home」，i）'中忘記了，但是沒有。非常感謝，無論如何:) – Bonny1992 2012-02-14 14:14:01

@Dave：注意。更新。 – Matt 2012-02-14 14:14:27

Javascript動畫級別：初學者

回答

相關問題