平滑幻灯片如何在JavaScript中运行？

Question

一段时间以来，我一直在试图找出平滑幻灯片背后的算法，淡化等...在javascript中。 只是为了给你一个正在谈论的内容的例子，我已经看到了一个包含内容的div，其高度为0px并且在切换时，它不仅仅是对齐高度，而是使用某种方式顺利地逐渐增长到高度功能。 我所知道的是，这个div的高度是从具有间隔设置的日期对象或某种循环中分配其高度值。 我在网上搜索试图找到解释这是如何工作但失败的教程。 有人可以向我解释如何创建我自己的平滑淡入淡出，幻灯片或参考我可以阅读的一些链接？

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

Answer 1

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

例如，如果要在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);
  }
}

Answer 2

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

您可能希望查看animate（）函数的jQuery源代码。

Answer 3

CSS3使它变得微不足道。

对于非基于CSS3的解决方案，这是查询“javascript smooth animation”的第一个Google结果： http ： //www.schillmania.com/content/projects/javascript-animation-2/

Answer 4

我正在从我的一个项目添加一些代码来移动div

belolw xs_tuck（）将被调用直到finalleftpositionval到达

此代码使div向右移动。

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