JavaScript 动画将不起作用答案

【问题标题】：JavaScript animation will not workJavaScript 动画将不起作用
【发布时间】：2015-03-27 08:12:09
【问题描述】：

我正在尝试进行基本的动画测试。我复制了该线程中作为答案提供的算法：JavaScript animation

我复制它的尝试不起作用。我所做的只是将函数的名称更改为“anim”，并可能更改了调用函数的方法。我究竟做错了什么？

#test {
position: absolute;
left: 140px;
}

</style>
<body onload="anim(document.getElementById("test"), "left", "px", 140, 300, 500);>
 <p id="test">LOL</p>


<script>
function anim(elem,style,unit,from,to,time) {
    if( !elem) return;
    var start = new Date().getTime(),
        timer = setInterval(function() {
            var step = Math.min(1,(new Date().getTime()-start)/time);
            elem.style[style] = (from+step*(to-from))+unit;
            if( step == 1) clearInterval(timer);
        },25);
    elem.style[style] = from+unit;
}
</script>
</body>

【问题讨论】：

语法高亮答案

标签： javascript animation

【解决方案1】：

语法错误。试试这个：

</style>
<body onload="anim(document.getElementById('test'), 'left', 'px', 140, 300, 500);">
<p id='test'>LOL</p>


<script>
function anim(elem,style,unit,from,to,time) {
if( !elem) return;
var start = new Date().getTime(),
    timer = setInterval(function() {
        var step = Math.min(1,(new Date().getTime()-start)/time);
        elem.style[style] = (from+step*(to-from))+unit;
        if( step == 1) clearInterval(timer);
    },25);
elem.style[style] = from+unit;
}
</script>
</body>

还有 jsFiddle：http://jsfiddle.net/rwowf5j8/

【讨论】：

【解决方案2】：

查看报价：

onload="anim(document.getElementById('test'), 'left', 'px', 140, 300, 500);">

【讨论】：