Question

So, I’m trying to make an animation in JavaScript (I want a navigation bar to pull down when I click it). The problem is that every time I click this navigation bar, it only moves down one pixel. How do I make it to where I can make the “Move” function repeat over and over so that it realizes the navigation bar is below “0”, and move it up? Here’s the code I have atm:

var i = -43 //original position of div

    function Move(x)
{
    if (i < 0)
    {
        i++;
        x.style.top = i + "px";
    }

}


function setPosition(x)
{
    setInterval(Move(x), 500);
}

P.S. I have the “div onclick” equal to “setInterval(this)”

Answer 1

I would use a setTimeout() (so you don’t have to worry about canceling the setInterval()), and note the use of an anonymous function (function(){}) for the first argument of the setTimeout() call:

#slider {
    position: absolute;
    top: -43px;
    left: 200px;
    width: 200px;
    height: 50px;
    border: 1px solid blue;
    background: #dff;
}

<div id='slider'>This is a slidout</div>
<div id="clicker">Click me!</div>

var slider = document.getElementById('slider'),
    clicker = document.getElementById('clicker');

clicker.onclick = function(){
    Move(slider, -43);
};

function Move(x, i)
{
    if (i < 0)
    {
        i++;
        x.style.top = i + "px";

        setTimeout(function(){
            Move(x, i);
        }, 50);
    }
}

http://jsfiddle.net/h2C3A/