平滑幻灯片在javascript中是如何工作的？

一段时间以来，我一直在努力找出javascript中平滑幻灯片、渐变等背后的算法。为了给大家举一个我所说的例子，我看到一个div，其中的内容高度为0px，并且可以切换，它不仅仅是快速上升，而是通过某种功能平稳地逐渐上升。我所知道的是，这个div的高度是从设置了间隔的日期对象或某种循环中指定的高度值。我在网上到处搜索，试图找到解释这是如何工作的教程，但失败了。有人能给我解释一下如何创建我自己的平滑渐变、幻灯片或参考一些我可以阅读的链接吗

---

PS：我知道我可以直接使用jquery，但我想知道淡入淡出和幻灯片是如何工作的。

实际上很简单。所有这些动画都使用一个间隔很短的计时器（请参见），例如100毫秒，每次计时器启动时，属性（高度或其他）都会更改总量的一小部分，而不是一次全部更改

例如，如果希望在1秒内从0px的高度滑动到200px，则可以设置一个计时器，该计时器每100ms触发一次，并将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);
  }
}

---

我自己从来没有看过jQuery代码，但我很确定它使用循环/超时来使用指定的公式逐渐增加元素的上/左/下/右css位置

您可能想看看animate（）函数的jQuery源代码。

CSS3使它变得简单

---

对于非基于CSS3的解决方案，这是Google查询“javascript平滑动画”的第一个结果：

我正在从我的一个项目中添加一些代码，以将div向右移动

将调用bellow xs_tuck（），直到到达finalleftpositionval

此代码使div向右移动

if(xs_endpt<finalLeftPositionVal){
     xs_endpt+=5;
     xs_pDiv2.style.left=xs_endpt;
     setTimeout("xs_tuck();",20); 
    }

---

if（xs_endpt例如，slide只不过是在一段时间内向左移动。如果你说left=left+10，直到定义的位置它向右移动，我刚才给出了slidea的例子，用于平滑/渐进过渡，一个称为“easing”的函数在开始和结束位置之间使用。其目的是在每个帧之间插入增量，这是一个关于放松函数@Erwin Man！感谢这是gold！它会出现（如果我正确阅读源代码）13毫秒-这也取决于你是否使用了任何缓和功能，它背后有算法，所有这些算法都根据这些算法对其进行动画制作。虽然此链接适用于AS2/3，但它显示了不同缓和功能的视觉表示：感谢你选择支持我们其余人：p