javascript - 使用 JavaScript 自定义动画

Question

我正在尝试使用 JavaScript 制作非常基本的自定义动画。我正在使用一个名为 Modernizr 的库来检测 HTML5 支持，如果浏览器不支持 CSS3 Transitions，我想拥有自己的自定义(非 jQuery)脚本来重新创建 CSS3 Transitions 的相同效果。

我对这段代码的想法是这样的:

JS:

function slide() {
  var cur = 0;
  while (cur <= 50) {
    setInterval("document.getElementById('slider').style.marginLeft=cur + 'px'",100);
    cur = cur++;
  }
}

HTML(用于悬停):

<div id="slider" onmouseover="slide()">
  This should slide left.
</div>

这行不通(我知道它不会循环，这是我无法弄清楚的问题之一)。我对 JS 很陌生，所以我不知道一些非常基本的东西。

我不想使用 jQuery 的主要原因是出于教育目的。我想在学习 jQuery 之前了解基本的 JS，这样我就知道如何做我想做的事情。

我希望这适用于两种不同的情况，一种是自动的，一种是仅在悬停时(悬停版本不必循环)。我有一些关于悬停的工作，但你悬停在它上面的次数越多，它就会移动得越快。

谢谢!

Answer 1

function slide() {
  var cur = 0;
  while (cur >= 50) {
    setInterval("document.getElementById('slider').style.marginLeft=cur + 'px'",100);
    cur = cur++;
  }
}

您的代码将 cur 设置为 0，然后 while 条件为 cur >= 50 (*而 cur 变量大于或等于 50) 这永远不会为真，因为它是 0。

此外，使用循环制作动画也不是一个好主意，因为浏览器可能不会以令人愉悦的方式呈现结果(或根本不会)。在没有循环的情况下使用 setInterval()。

如果我的任务是写这篇文章，它可能看起来像......

function slide(element, newHeight) {
    var currentHeight = element.offsetHeight;
    var increaseHeight = function() {
        currentHeight += 10;
        element.style.height = currentHeight + 'px';
    }
    var interval = setInterval(function() {
        if (currentHeight >= newHeight) {
            clearInterval(interval);
        }
        increaseHeight();
    }, 100);
}

jsFiddle .