javascript - 简单的javascript动画问题

Question

我正在阅读本教程 http://www.schillmania.com/content/projects/javascript-animation-1/当我编写代码时，我让我的 div 向右移动 10px，但只有一次，如果我想继续单击按钮并让它每次移动额外的 10px，或者如果设置 setTimeout() 不应该它一直调用该函数并每 20 毫秒添加一个额外的 10px？我知道这可能是一个简单的解决方案，所以如果有人能提供帮助，我们将不胜感激。 (我只是在学习，所以不要侮辱)。

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

Answer 1

问题出在这一行:

$("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 上运行良好

Opps...忘记保存最新版本，它在这个 fiddle 中有效。 http://jsfiddle.net/CDyQr/1/

另一个编辑:用户在下面的评论中询问如何远离全局范围。这是一个使用闭包的方法:

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

有关范围和操作方法的更多信息，这里有一个非常详细的 Stack Overflow 答案:

What is the scope of variables in JavaScript?