простая проблема анимации javascript

Question

Я проходил этот урок http://www.schillmania.com/content/projects/javascript-animation-1/, и когда я установил код, я получил свой div, чтобы переместиться на 10 пикселей вправо, но только один раз, что если я захочу продолжать нажимать кнопку и заставить ее двигатьсядополнительные 10 пикселей каждый раз, или если setTimeout () был установлен, разве он не должен продолжать вызывать эту функцию и добавлять дополнительные 10 пикселей каждые 20 мс?Я знаю, что это, вероятно, простое решение, поэтому, если кто-то сможет помочь, оно будет очень признательно.(Я только учусь, поэтому без оскорблений).

    <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

Оппс ... забыл сохранить последнюю ревизию, она работает в ЭТОЙ скрипке. http://jsfiddle.net/CDyQr/1/

Другое редактирование: пользователь спросил в комментарии ниже, как остаться вне глобальной области видимости. Вот метод, использующий замыкания:

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

Для получения более подробной информации о сфере действия и способах манипулирования ею, вот очень подробный ответ переполнения стека:

Какова область видимости переменных в JavaScript?

Answer 2

Поскольку похоже, что вы используете Jquery, попробуйте это

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

вместо этого

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

посмотрите, как оно работает здесь http://jsfiddle.net/TEwvT/

Answer 3

Если вы используете jquery, вы должны избавиться от событий onclick и использовать:

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

Я не проверял это, но вот с чего бы я начал. Я делал нечто подобное раньше. Я просто забываю, как я пошел на это. JQuery устраняет необходимость использования событий onclick практически в каждом случае.

Я проверял это, если вы окружили '+ = 10px', это работает