javascript - 在 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);

最后是应该执行动画的折叠器函数本身：

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

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