Question

非常基本的练习动画：

HTML

<div id="div"></div>

JS

div = document.getElementById("div")

div.onmouseover = move();

function move() {
    cHeight = div.style.height;

    while (cHeight < 300) {
        div.style.height = (cHeight + 10) + "px";
        setTimeout (move, 20);
    }
}

当我加载页面时（它仍然是本地文件）它无法加载，我得到Chrome“aw snap，页面加载失败”错误页面。这很奇怪，因为正如我所说，它仍然是本地的。帮助

Answer 1

你实际上根本不应该使用while循环。

function move() {
  var cHeight = div.style.height;

  if ( cHeight < 300 ) {
    div.style.height = (cHeight + 10) + "px";
    setTimeout(move, 20); //This way the height only changes every 20ms
  }
}

在您的代码中，您永远不会增加cHeight - ＆gt;无限循环

Answer 2

只有在您自己设置的情况下才会设置style.height属性。而是尝试div.clientHeight或div.offsetHeight。 OffsetHeight是相同的，但包括填充，边框和边距。

您的代码中还有其他一些问题。您正在立即调用move函数，而不是仅将其指定为处理程序，并且您的动画代码本身有点坏 - 您不需要while循环和超时。

我写了一段代码，可能与您想要的类似：

<div id="div" style="width: 50px; height: 50px; background: red;">
</div>

<script type="text/javascript">
var div = document.getElementById("div")

div.onmouseover = move;

function move() {
    if(div.offsetHeight < 300) {
        div.style.height = (div.offsetHeight + 10) + "px";
        setTimeout(move, 20);
    }
}
</script>

Answer 3

你进入了无限循环！发生这种情况是因为你永远不会更新cHeight，因为你将递归和迭代结合起来。

function move() {

    var cHeightStr = div.style.height.substr(-2);
    var cHeight = cHeightStr.substr(0, cHeightStr.length - 2);

    if (cHeight < 300) {
        cHeight += 10;
        div.style.height = cHeight + "px";
        setTimeout (move, 20);
    }
}

Answer 4

好了这里发生了一些不好的事情，你不需要一个while循环，因为它会在浏览器有机会呈现任何变化之前移动所有位置，它实际上永远不会退出循环。

此页面上的其他示例也使用div.style.height，它以空白字符串开头。主要是通过JS覆盖文档样式的指令。所以它只返回你之前在JS中设置的值，而不是div的实际位置。

function move() {
    var cHeight = div.offsetTop; //this returns the current calculated top offset from the container

    if(cHeight < 300) { // if we're under 300 then update position
        div.style.height = (cHeight + 10) + "px";
        setTimeout (move, 20); //wait for next frame then update position again
    }
}

基本的Javascript动画

4 个答案: