Javascriptのアニメーションレベル：初心者

Question

私はJavascriptのアニメーションを習得しようとしていますが、私が思ったようにxDは動作しません。

UPDATED DELETING貼付ミス

は私が

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> 

をしかし、明らかに間違っています。 は、私がこれを行うために何ができるか？:)すべての返信に おかげで:)

Answer 1

はまず、あなたは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の範囲の、最後の値になってしまうでしょう、あなたが新しいスコープレベルを追加する必要があり、この問題を解決することです。コメントで述べたように、この問題に関するより詳細な説明については、あなたがずらすする必要がありますアニメーションを取得するには... 200msの後に実行されますあなたのタイムアウトのすべてを見つけるだろう、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); 
    } 
}; 

を見ます実行。最も簡単な方法は、遅延計算にiを追加することです。すなわち25 * i。

私はあなたがopacityとfilterあなたsetOpacity機能で最初0に設定しているなぜわかりません。これらのリセットはすぐにに設定されます。

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 + ')'; 
};