Javascript“For”循环不工作？

我有一个JavaScript文件，用于尝试为下拉菜单设置动画。我在该文件集中的“切换”功能在我点击某个div时运行。下面是我使用的脚本：Javascript“For”循环不工作？

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 =切换（本）”。第一个for循环的工作原理（它将div的顶部偏移量设置为0）。但是，第二个for循环不会设置offsetTop。我知道for循环正在激活，因为我测试了它，并且它给了我0到-50之间的每个整数。为什么不设置偏移位置？

来源

2012-02-12 Isaiah Bugarin

如果你想看动画的发生，你将需要包含某种延迟。您还需要为顶部样式属性指定一个单位，例如'px'。 – 2012-02-12 21:03:58

1）您必须指定一个单元的顶部，即：你使用的setInterval或setTimeout的

就像你问一个例子x.style.top = i +"px"

2）你的功能将不能代替动画。对于我的一个项目，我不会这样做，但我保留了自己的功能，让您更熟悉代码。我使用的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; 
      } 
     } 
    } 
})();

来源

2012-02-12 21:07:33 dievardump

你可以举一个setInterval的例子吗？我知道如何在C＃中处理这个问题，但我对JavaScript很新。 – 2012-02-12 21:12:41

通过编辑向您展示setTimeout的示例 – dievardump 2012-02-12 21:35:36

你不得不使用x.style.top = i + 'px'为顶部和类似CSS属性必须定义类型（px， em,%等），除非它们是0，因为在任何情况下都是0。

但是您的脚本实际上会将对齐div直接指定为-50px，因为您不必在这些迭代步骤之间等待。

我建议使用像jQuery这样的库来使用它的animate()方法。

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

来源

2012-02-12 21:11:07 Tharabas

Javascript“For”循环不工作？

回答

相关问题