Изменение свойства CSS (левое положение) динамически на setInterval

Question

То, что я пытаюсь достичь:

У меня есть кнопка. Когда эта кнопка нажата - она ​​запускает функцию, которая устанавливает setInterval для запуска другой функции один раз в секунду. Эта функция должна перемещать делитель на 100 пикселей влево.

Что на самом деле происходит:

Делитель перемещает 100 пикселей влево, но затем останавливается и не двигается на любом последующем обжиге на setInterval функции.

Изображение, которое запускает первоначальную функцию:

<img id="playerimg" src="../../Downloads/1375889362_toggle-right_red.png" alt="" 
width="42" height="42" border="0" onclick="vidgalshow()"/> 

Заявление внутри этой функции, которая инициализирует и выстреливает Интервал:

closemaindiv = setInterval("collapser()", 1000); 

И, наконец, сама разрушитель функция, которая должна выполнять анимацию:

document.getElementById("maindiv").style.position = "absolute"; 
document.getElementById("maindiv").style.left = (document.getElementById("maindiv").style.left - 100); 

Я знаю, что Интервал - это firin g каждую секунду, потому что каждый раз я запускаю alert(). (Но поле перемещается один раз влево, а затем снова (!)).

Любые идеи о том, что здесь происходит?

Answer 1

Я считаю, что вам нужно проанализировать текущее значение как число перед вычитанием:

var currentLeft = parseInt(document.getElementById("maindiv").style.left, 10); 
document.getElementById("maindiv").style.left = (currentLeft - 100) + "px"; 

Кроме того, я рекомендую вам передать ссылку на функцию setInterval вместо строки:

closemaindiv = setInterval(collapser, 1000);