JavaScript animation will not work

Question

I'm trying to make a basic animation test work. I copied the algorithm offered as an answer in this thread: JavaScript animation

My attempt to copy it isn't working. All I did was change the name of the function to "anim" and possibly changed the method of calling the function. What am I doing wrong?

#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>

answer in syntax highlighting – Kirill Pisarev Jan 28 '15 at 12:21 — Kirill Pisarev, Jan 28 '15 at 12:21

score 0 · Accepted Answer · answered Jan 28 '15 at 12:21

Wrong syntax. Try this:

</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>

And jsFiddle: http://jsfiddle.net/rwowf5j8/

score 0 · Answer 2 · answered Jan 28 '15 at 12:22

0

Check quotes:

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

answered Jan 28 '15 at 12:22

Azzy Elvul

1,403
1
12
22

JavaScript animation will not work

2 Answers2