javascript - Changing CSS property (left position) dynamically on setInterval - Stack Overflow

admin管理员组

文章数量:1426454

What I am trying to achieve:

I have a button. When this button is clicked - it fires a function which sets setInterval to run another function once a second. This function should move a divider 100 pixels to the left.

What is actually occurring:

The divider moves 100 pixels to the left but then stops and does not move on any subsequent firing on the setInterval function.

The image which fires the initial function:

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

The statement inside this function which initializes and fires the Interval:

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

And finally the collapser function itself which should perform the animation:

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

I know that the Interval is firing every second because I have an alert() running each time. (But the box moves once to the left and then not again(!)).

Any ideas on what's going on here?

What I am trying to achieve:

I have a button. When this button is clicked - it fires a function which sets setInterval to run another function once a second. This function should move a divider 100 pixels to the left.

What is actually occurring:

The divider moves 100 pixels to the left but then stops and does not move on any subsequent firing on the setInterval function.

The image which fires the initial function:

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

The statement inside this function which initializes and fires the Interval:

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

And finally the collapser function itself which should perform the animation:

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

I know that the Interval is firing every second because I have an alert() running each time. (But the box moves once to the left and then not again(!)).

Any ideas on what's going on here?

• javascript
• css
• animation
• setinterval

Share Improve this question Follow asked Aug 7, 2013 at 14:07 JordanJordan 93022 gold badges1313 silver badges3535 bronze badges 3

• 2 left takes a length not an integer. – Quentin Commented Aug 7, 2013 at 14:09
• Not that it would fix anything, but I'd suggest using setInterval(collapser, 1000). If you pass a string of script, it is executed in the global scope (and treated like an eval call, so it has those implications)...so if collapser were a local function, it wouldn't be found and would throw an exception. Just a general convention to follow – Ian Commented Aug 7, 2013 at 14:12
• Thanks for these pointers guys. Very helpful. – Jordan Commented Aug 7, 2013 at 14:21

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

I believe you need to parse the current value as a number before subtracting:

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

Also, I remend you pass a function reference to setInterval instead of a string:

closemaindiv = setInterval(collapser, 1000);

本文标签： javascriptChanging CSS property (left position) dynamically on setIntervalStack Overflow