Javascript"；至于；循环不工作？

我有一个Javascript文件，我正在使用它来尝试设置下拉菜单的动画。我将该文件中的“切换”功能设置为在单击某个div时运行。以下是我使用的脚本：

var up = true;
        function Toggle(x)
    {
        if (up)
        {
            for (var i = x.offsetTop; i <= 0; i++)
            {
                x.style.top = i;
                if (i == 0)
                {
                    up = false; 
                }
            }
        }

        else if (up == false)
        {
            for (var i = x.offsetTop; i >= -50; i--)
            {
                x.style.top = i;
                if (i == -50)
                {
                    up = true;
                }
            }
        }
    }

var up=true；
功能切换（x）
{
如果（向上）
{
对于（变量i=x.offsetTop；i=-50；i--）
{
x、 style.top=i；
如果（i==-50）
{
向上=真；
}
}
}
}

在要设置动画的HTML div中，我将“onclick”属性设置为“onclick=Toggle（this）”。第一个for循环正常工作（它将div的顶部偏移设置为0）。但是，第二个for循环没有设置偏移。我知道for循环正在激活，因为我已经对它进行了测试，它给出了0到-50之间的每个整数。为什么不设置偏移位置？

1）必须在顶部指定一个单位，即：

x.style.top=i+“px”

2） 您的函数不会设置动画，而是使用setInterval或setTimeout

就像你问的，举个例子。对于我的一个项目，我不会这样做，但我保留了您的函数以使您更熟悉代码。 我使用setTimeout而不是setInterval，因为setInterval在不需要时必须清除，并且setTimeout只启动一次：

var Toggle = (function() { // use scope to define up/down
    var up = true; 
    return function(element) {
        var top = parseInt(element.style.top, 10); // element.offsetTop ?
        if ( !top ) {
            top = 0;
        }

        if (up) {
            if (element.offsetTop < 0) { // if we are not at 0 and want to get up
                element.style.top = (top+1) + "px";
                setTimeout(function() { Toggle(element); }, 10); // recall the function in 10 ms
            } else { // we change up value
                up = !up;  
            }
        }
        else {
            if (element.offsetTop > -50) {
                element.style.top = (top-1) + "px";
                setTimeout(function() { Toggle(element); }, 10); // recall the function in 10 ms
            } else {
                up=!up;
            }
        }
    }
})();

var Toggle=（function（）{//使用作用域定义向上/向下
var up=真；
返回函数（元素）{
var top=parseInt（element.style.top，10）；//element.offsetTop？
如果（！顶部）{
top=0；
}
如果（向上）{
如果（element.offsetTop<0）{//如果我们不在0并且想要起床
element.style.top=（top+1）+“px”；
setTimeout（function（）{Toggle（element）；}，10）；//在10毫秒内调用该函数
}否则{//我们将向上更改值
向上=！向上；
}
}
否则{
如果（element.offsetTop>-50）{
element.style.top=（top-1）+“px”；
setTimeout（function（）{Toggle（element）；}，10）；//在10毫秒内调用该函数
}否则{
向上=！向上；
}
}
}
})();

您必须使用

x.style.top=i+'px'

，因为top和类似的css属性必须定义类型（

px

，

em

，

%

，等等），除非它们是

0

，因为在任何情况下都是0

但是您的脚本实际上会将div直接捕捉到-50px，因为您不需要在这些迭代步骤之间等待

我建议使用一个库，就像使用它的

animate（）

方法一样

function Toggle(obj) {
  $(obj).animate({ 
    top: parseInt($(obj).css('top')) === 0 ? '-50px' : '0px'
  })
}

---

如果希望看到动画发生，则需要包含某种延迟。您还需要为top style属性指定一个单位，例如

px

。您能给出一个setInterval的示例吗？我知道如何在C#中处理这个问题，但我对Javascript相当陌生。