原生动画javascript

Question

如何在不使用jQuery库的动画方法的情况下在本机JavaScript中运行动画（如更改CSS属性）？ 我试过jQuery库动画和framerate间隔更改，使我的动画流体。 在此先感谢

Answer 1

下面是一个例子：

http://jsfiddle.net/4M3ts/1/

function animate(object, property, start_value, end_value, time) { 
    var frame_rate = 0.06; // 60 FPS 
    var frame = 0; 
    var delta = (end_value - start_value)/time/frame_rate; 
    var handle = setInterval(function() { 
    frame++; 
    var value = start_value + delta * frame; 
    object.style[property] = value + "px"; 
    if (value == end_value) { 
     clearInterval(handle); 
    } 
    }, 1/frame_rate); 
} 

animate(document.getElementById("a"), "top", 0, 100, 1000); 

Answer 2

CSS3可以使用transition自动为大多数样式属性设置动画效果。它可能会比使用任何基于JavaScript的动画获得更平滑。

有一个很好的教程，如何使用它，here。

Answer 3

这里是一个简短演示：

function fade(element, started) { 
    if (element.style.opacity > 0){ 
     console.log(element.style.opacity); 
     element.style.opacity -= 0.02; 
     setTimeout((function(e){return function(){fade(e);}})(element),10); 
    } 
} 
fade(document.getElementById("myname")); 

这里是一个的jsfiddle：http://jsfiddle.net/s6Kzh/1/