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

我知道 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);