Question

所以，我正在尝试用JavaScript制作动画（当我点击它时我想要一个导航栏拉下来）。问题是，每次单击此导航栏时，它只向下移动一个像素。如何使“移动”功能反复重复以使其实现导航栏低于“0”并将其向上移动？这是我的代码：

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。我的“div onclick”等于“setInterval（this）”

Answer 1

我会使用setTimeout()（因此您不必担心取消setInterval()），并注意第一个参数使用匿名函数（function(){}） setTimeout()电话：

#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/

如何重复功能onclick - Javascript

1 个答案: