簡單的JavaScript動畫問題

我正在閱讀本教程http://www.schillmania.com/content/projects/javascript-animation-1/，當我創建代碼時，我讓我的div向右移動10px，但只有一次，如果我想繼續單擊按鈕並讓它移動每次額外10px，或者如果setTimeout（）被設置，它不應該繼續調用該函數並添加一個額外的10px有史以來20ms？我知道這可能是一個簡單的解決方案，所以如果任何人可以幫助它，將不勝感激。（我只是學習如此沒有侮辱）。簡單的JavaScript動畫問題

<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>

我有#one {} CSS花式如下：

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

來源

2012-02-23 T110

這對我很有用。最初我把它設置爲：$（「one」）。style.left =（$（「one」）。style.left + 10）+'px';那也不適合我。另外我不使用jQuery，我試圖在沒有它的基礎上學習基礎知識。我只是想設置$字符等於「document.getElementById（」「）」...有關爲什麼上述代碼片段不能正常工作的任何想法？或者有什麼辦法可以在沒有全球性的情況下實現？ – T110 2012-02-23 19:49:29

問題是這一行：

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

不等同於「增長style.left通過10" 。它等同於「追加 '10px的' 以syle.left的當前值

這意味着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

糟糕...忘了保存最新版本，它工作在這個小提琴。 http://jsfiddle.net/CDyQr/1/

ANOT她編輯：用戶在下面的評論中詢問如何遠離全球範圍。下面是一個使用方法閉包：

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

有關範圍和方式來操縱它更多的信息，這裏是一個非常詳細的堆棧溢出的答案：

What is the scope of variables in JavaScript?

來源

2012-02-23 18:49:47

事實上，如果他正確地從本教程複製粘貼，他將這一行'foo.style.left =（foo.style.left + 10）+'px'' – 2012-02-23 18:50:55

沒錯，但隨後他就從來沒有遇到過這個問題，並且介紹了變量範圍，追加和增量。我個人喜歡看到人們試圖以自己的方式複製代碼。它表明了一種願望，即不要只學習如何做某件事，而是要傾向於做一些事情。 :) – 2012-02-23 18:52:52

這是不正確的。你的選擇器是錯誤的。所以這不會起作用 – Henesnarfel 2012-02-23 18:53:03

如果您使用jQuery你應該擺脫onclick事件和使用：

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

我還沒有測試過，但這就是我要開始的地方。我之前做過類似的事情。我只是忘記了我是如何去做的。 JQuery在幾乎所有情況下都不需要使用onclick事件。

我測試了這一點，如果你圍繞 '+ = 10px的' 它的工作原理

來源

2012-02-23 18:51:22 ddilsaver

因爲它看起來像你正在使用jQuery試試這個

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

，而不是這個

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

看到它在這裏工作http://jsfiddle.net/TEwvT/

來源

2012-02-23 18:51:36 Henesnarfel

簡單的JavaScript動畫問題

回答

相關問題