Question

我有一个Javascript文件，我正在尝试设置下拉菜单的动画。当我点击某个div时，我在该文件集中有“Toggle”功能。这是我正在使用的脚本：

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;
                }
            }
        }
    }

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

Answer 1

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;
            }
        }
    }
})();

Answer 2

您必须使用x.style.top = i + 'px'作为顶级，类似的css属性必须定义类型（px，em，%等），除非它们是{ {1}}，因为在任何情况下都是0。

但是你的脚本实际上将div 直接删除到-50px，因为你不在这些迭代步骤之间等待。

我建议使用像jQuery这样的库来使用0方法。

animate()

Javascript“For”Loop无效？

2 个答案: