好的,我正在更改 CSS“left”属性的值,如下所示:
s_list.style.left = left - amount + 'px';
s_list 是一个变量,它是一个 UL 元素。单击按钮会执行此行。但是效果是立竿见影的,要快点看剩下的任何一种动画。我可以用纯 JS 做些什么来减慢它的速度或为更改添加可配置的延迟?
查看我的工作演示:
http://jsfiddle.net/benhowdle89/RCkPq/
并可能提出解决方案!
最佳答案
对于基本动画,您可以使用setTimeout
或setInterval
。然而,在现代浏览器中它们已经过时了。一种更有效的动画方式是使用 requestAnimationFrame
.
function animate(things){
//Do stuff here.
requestAnimationFrame(animate);
}
您可能会问,“这有什么不同?”
那么,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!)
关于javascript - 使用纯 JS 动画更改 CSS 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10923298/