javascript - 平滑幻灯片如何在 JavaScript 中工作？

Question

有一段时间我一直在尝试找出 JavaScript 中平滑幻灯片、淡入淡出等背后的算法。举个例子来说明一下，我见过一个包含内容的 div，其高度为 0px，并且在切换时，它不只是捕捉到高度，而是平滑地并且使用某种功能逐渐成长到高度。我所知道的是，这个 div 的高度是从设置了间隔的日期对象或某种循环中分配的高度值。我在整个网络上进行了搜索，试图找到解释其工作原理的教程，但失败了。有人可以向我解释一下如何创建我自己的平滑淡入淡出、幻灯片或引用一些我可以阅读的链接吗？

PS:我知道我可以只使用 jquery，但我想知道淡入淡出和幻灯片实际上是如何工作的。

Answer 1

其实很简单。所有这些动画都使用一个计时器(请参阅 setInterval )，间隔很短，例如 100 毫秒，并且每次计时器触发时，属性(高度或其他)都会更改总量的一小部分，而不是一次全部更改.

例如，如果您想在 1 秒内从 0px 的高度滑动到 200px，那么您可以设置一个计时器，每 100 毫秒触发一次，并将 DIV 的高度增加 20px。这样，在 1 秒内，计时器将触发 10 次，高度将为 200px。

一个简单的例子:

function slideOpen(elem, finalHeight, slideTime) {
  var count = slideTime * 10;      // 10 intervals per second
      height = 0,                  // current height
      delta = finalHeight / count; // change in height per interval

  var timerId = setInterval(slide, 100);

  function slide() {
    height += delta;
    elem.style.height = height + 'px';
    if (--count == 0)
      clearInterval(timerId);
  }
}