重复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动画？

回答

相关问题