在setInterval上动态更改CSS属性（左侧位置）

Question

我想要实现的目标：

我有一个按钮。单击此按钮时 - 它会触发一个函数，该函数将setInterval设置为每秒运行一次另一个函数。此功能应将分隔符向左移动100个像素。

实际发生的事情：

分隔符向左移动100个像素，但随后停止并且不会在setInterval函数的任何后续触发上移动。

触发初始功能的图像：

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

此函数中的语句初始化并触发Interval：

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

最后，collapser函数本身应该执行动画：

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

我知道Interval每秒都会触发，因为每次都有一个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);