Question

我正在阅读这个教程http://www.schillmania.com/content/projects/javascript-animation-1/，当我编写代码时，我让我的div向右移动10px，但只有一次，如果我想继续点击按钮并让它移动一下每次额外10px，或者如果设置了setTimeout（），它应该继续调用该函数并在20ms内添加额外的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 ...忘了保存最新版本，它适用于这个小提琴。 http://jsfiddle.net/CDyQr/1/

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

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

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

What is the scope of variables in JavaScript?

Answer 2

如果你使用jquery，你应该摆脱onclick事件并使用：

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

我没有测试过这个，但这就是我要开始的地方。我之前做过类似的事。我忘了我是怎么做到的。几乎在每种情况下，JQuery都不需要使用onclick事件。

如果你围绕'+ = 10px'工作

，我测试了这个

Answer 3

因为看起来你正在使用Jquery试试这个

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

而不是

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

看到它在这里工作http://jsfiddle.net/TEwvT/

简单的JavaScript动画问题

3 个答案: