简单的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动画问题

回答

相关问题