シンプルなJavaScriptのアニメーションの問題

Question

私はこのチュートリアルhttp://www.schillmania.com/content/projects/javascript-animation-1/を実行していましたが、コードを作成するときには、divを右に10px移動させますが、ボタンをクリックし続けて毎回10pxを追加するか、setTimeout（）を設定してもその関数を呼び出す必要はありません。追加の10pxを20ms追加する必要がありますか？私はそれがおそらく簡単な解決策であることを知っています。だれかが助けてくれれば大いに感謝します。 （私はただの侮辱を学んでいるだけです）。問題は、この行である

width: 100px; 
height: 50px; 
float: left; 
margin-right: 10px; 
background-color: blue; 
position: relative; 

Answer 1

：次のように

<div onclick="invis('one')" id="one"></div> 
    <button onclick="domove()">hello</button> 
    <div onclick="invis('two')"id="two"></div> 
    <div onclick="invis('three')"id="three"></div> 

<script type="text/javascript"> 
    function domove() 
     { 
      $("one").style.left+=10+'px'; 
      setTimeout(domove,20); 
     } 
</script> 

Iは#one {} CSSのスタイリングを有する

$("one").style.left+=10+'px'; 

「増加によってstyle.leftするために一致しません10 "となる。それはsyle.leftの現在の値を「追加 '10pxの' に相当

これはstyle.leftは常に10pxのにリセットされていることを意味し

この試してみてください。。

<script type="text/javascript"> 
//Global variable to increment every function run 
numberOfPixels = 10; 
function domove() 
    { 
     $("one").style.left=numberOfPixels+'px'; 
     numberOfPixels += 10; 
     setTimeout(domove,20); 
    } 
</script> 

編集：罰金作品をこのJSFiddle

中にエラーに...最新のリビジョンを保存するのを忘れ、それはTHISフィドルで動作します。 http://jsfiddle.net/CDyQr/1/

Anot彼女の編集：ユーザーは下のコメントでグローバルスコープから抜け出す方法を尋ねました。ここでクロージャを使用する方法である：スコープとそれを操作する方法の詳細については

http://jsfiddle.net/CDyQr/2/

、ここでは非常に詳細なスタックオーバーフローの答えは：

What is the scope of variables in JavaScript?

Answer 2

あなたはjqueryのを使用している場合、あなたは私はこれをテストしていませんが、私が開始する場所それはだ

$('#one').click(function(){ 
    $('#one').css({'right':'+=10px'}) 
}); 

：onclickのイベントや使用を取り除く必要があります。私はこれまで同様のことをしてきました。私はそれについてどうやって行ったのか忘れています。ほとんどの場合、JQueryはonclickイベントを使用する必要性を排除します。

私はあなたが '+ = 10pxの' を囲む場合は、代わりにこの

$("one").style.left+=10+'px'; 

それを見るのこの

$("#one").css("left","+=10"); 

を試すのjQueryを使用しているように見えるので、それは

Answer 3

に動作しますこれをテストここで働いていますhttp://jsfiddle.net/TEwvT/