Question

I am trying to write a function that will move an element by adjusting its ‘left’ style over time. Its currently not working at all in its present form.

    var tab;
    var tabPos;

    function init() {
        tab = document.getElementById("tab");
        tabPos = 10.8;
        tab.style.left = tabPos + '%';
    }

    function moveOver( ) {
        if (tabPos < 15.8)
            {
                setTimeout(function moveOver( ), 100;
                tabPos = tabPos + 0.1;
                tab.style.left = tabPos + '%';
            }
        else if (tabPos > 15.8)
            {
                setTimeout(function moveOver( ), 100;
                tabPos = tabPos - 0.1;
                tab.style.left = tabPos + '%';
            }
     }

The init function successfully sets the initial position of the element but I added the moveOver function to the code the element’s position is no longer set.

Answer 1

Change the lines:

setTimeout(function moveOver( ), 100;

to

setTimeout(moveOver, 100);

---

function moveOver( ) isn’t a valid JavaScript syntax. Also, your brackets (or parenthesis) doesn’t match. Because you have a syntax error, your code will not work.

For setTimeout, you are supposed to pass a function as the first parameter, so mouseOver or function(){mouseOver();} will work.

---

Another problem of your script… is that you will see the element constantly jumping.

You have two conditions: tabpos < 15.8 and tabpos > 15.8. The condition which execution doesn’t enter either one of both if-blocks is tabpos == 15.8… but JavaScript’s Number is actually a floating point number. Thanks to precision error, 15.8 == 15.7 + 0.1 will result in false, which shows that 15.8 is not exactly the same as 15.7 + 0.1. In fact, 15.7 + 0.1 is approximately equal to 15.799999999999999…

So I suggest you to use an integer value for tabPos, for example 158, and divide it by 10 only when setting the style.

---

A possible result of your code:

var tab;
var tabPos;

function init() {
    tab = document.getElementById("tab");
    tabPos = 108;
    tab.style.left = tabPos / 10 + '%';
}

function moveOver( ) {
    if (tabPos < 158)
        {
            setTimeout(moveOver, 100);
            tabPos = tabPos + 1;
            tab.style.left = tabPos / 10 + '%';
        }
    else if (tabPos > 158)
        {
            setTimeout(moveOver, 100);
            tabPos = tabPos - 1;
            tab.style.left = tabPos / 10 + '%';
        }
 }