重複Javascript動畫？

我試圖讓一個div上去，下來，再次，再次下降等，直到你點擊它。這是我有：重複Javascript動畫？

<!DOCTYPE html> 
<html> 
<head> 
<title>Fun with animations dude</title> 
<link rel="stylesheet" href="animation.css"/> 
</head> 
<body> 
    <div id="moving"> 
    </div> 

    <script type="text/javascript"> 
     var moving = document.getElementById("moving"); 
     var mMargin = moving.style.marginTop | 0; 
     var moving = false; 

     moving.onclick = start; 

     function start() { 
      if (moving == false) { 
       moving = true; 
       move(); 
       window.alert("Start!"); 
      } 

      else { 
       moving = false; 
       window.alert("Aww..."); 
      } 
     } 


     function move() { 
      if (moving) { 
       if (mMargin < 700) { 
        mMargin += 10; 
        moving.style.marginTop = mMargin + "px"; 
        setTimeout(move, 20); 
       } 

       else { 
        mMargin -= 10; 
        moving.style.marginTop = mMargin + "px"; 
        setTimeout(move, 20); 
       } 
      }  
     } 
    </script> 
</body> 
</html>

我其實是一個相當的同時爲自己感到驕傲，直到它沒有工作......正如你所看到的，我通過將這些警報所做的故障排除嘗試框。它們都沒有被觸發，所以現在這是最初的問題，儘管也可能有其他錯誤。控制檯中沒有錯誤。建議嗎？

來源

2014-12-11 Tommay

-1

第一個和第三個局部變量都被稱爲moving。將第二個重命名爲isMoving（並更新對此變量的任何提及）會導致警報按預期顯示。

來源

2014-12-11 02:35:20 HippydogMX

Hippydog的回答讓我超越了第一部分。然後我意識到我不得不添加另一個變量，以防止div在第一次運行的底部放開。我只是想張貼別人看着這個參考什麼工作：

<!DOCTYPE html> 
<html> 
<head> 
<title>Fun with animations dude</title> 
<link rel="stylesheet" href="animation.css"/> 
</head> 
<body> 
    <div id="moving"> 
    </div> 

    <script type="text/javascript"> 
     var moving = document.getElementById("moving"); 
     var mMargin = moving.style.marginTop | 0; 
     var isMoving = false; 
     var movingDown = true; 

     moving.onclick = start; 

     function start() { 
      if (isMoving == false) { 
       isMoving = true; 
       move(); 
      } 

      else { 
       isMoving = false; 
      } 
     } 


     function move() { 
      if (isMoving) { 
       if (movingDown) { 
        mMargin += 10; 
        moving.style.marginTop = mMargin + "px"; 
        if (mMargin >= 1000) { 
         movingDown = false; 
        } 
        setTimeout(move, 20); 
       } 

       else { 
        mMargin -= 10; 
        moving.style.marginTop = mMargin + "px"; 
        if (mMargin <= 0) { 
         movingDown = true; 
        } 
        setTimeout(move, 20); 
       } 
      } 
     } 
    </script> 
</body> 
</html>

如果任何有經驗的程序員發現這個腳本一些不可預見的問題，請隨時讓我知道。

來源

2014-12-11 02:57:46 Tommay

重複Javascript動畫？

回答

相關問題