已更新

Question

好的，我正在更改CSS'left'属性的值，如下所示：

s_list.style.left = left - amount + 'px';

s_list是一个UL元素的变量。单击按钮即可执行此行。但效果是即时的，快速看到任何类型的动画。有什么我可以用纯JS来减慢速度或为变化添加可配置的延迟吗？

要查看我的工作演示：

http://jsfiddle.net/benhowdle89/RCkPq/

可能建议一个解决方案！

Answer 1

对于基本动画，您可以使用setTimeout或setInterval。但是，在现代浏览器中，它们已经过时了。一种更有效的动画制作方法是使用requestAnimationFrame。

function animate(things){
    //Do stuff here.
    requestAnimationFrame(animate);
}

您可能会问，"How is this different?"嗯，requestAnimationFrame只会在用户实际看到该元素时重绘屏幕。如果用户在另一个选项卡上，或向下滚动页面，则不会重绘它。它将记忆保存在计算机中。

不幸的是，到目前为止，每个浏览器仍然需要一个前缀。这是一个fix：

if ( !window.requestAnimationFrame ) {
    window.requestAnimationFrame = ( function() {
        return window.webkitRequestAnimationFrame ||  //webkit
        window.mozRequestAnimationFrame ||            //mozilla
        window.oRequestAnimationFrame ||              //opera
        window.msRequestAnimationFrame ||             //IE!
        function(callback, element) {
            window.setTimeout( callback, 1000 / 60 ); //not supported
        };
    } )();
}

已更新

现场演示：

http://jsfiddle.net/DerekL/4wLsC/
http://jsfiddle.net/DerekL/4wLsC/4/ - 循环浏览图片_{^{（仍然没有jQuery！）}}

Answer 2

您正在做的是立即将值更改为点击时的最终位置。

为了制作动画，你需要迭代更长的时间，每一帧将左值改变一小部分。

尝试使用setInterval或setTimeout链，其中每一步都会将元素移动几个像素，以实现动画效果。

示例：

function move(){
   s_list.style.left = s_list.style.left - amount/10 + 'px';
   if (s_list.style.left.slice(0, -2) > desired_offset){
      setTimeout(move,10);
   }
}

这会将元素移动数量/ 10像素，并重复操作直到您到达所需位置。金额/ 10可以更改为您想要的任何速率/速度。

编辑：为字符串/数字比较添加了.slice（信用：Wex）

Double EDIT ：在下面的评论中收听Wex。

Answer 3

您需要使用setInterval function定期运行代码。

或只是use jQuery。

使用纯JS动画更改CSS值

3 个答案:

已更新