javascript - 如何使用 JavaScript 为对象制作动画？

Question

我想要为一个对象(在我的示例中为 div)设置动画，从左到右移动 100px，仅使用 javascript(不允许使用 JQuery)。

这是我的代码 http://pastebin.com/HvNjQES0 .

function move(elem) {
    var st = 0;
    console.log("ELEM " + elem);

    function animate() {
        st++;
        console.log(st);
        elem.style.left = st + 'px';
        console.log("elem" + elem.style.left);
        if (st == 100) // check finish condition
            clearInterval(id)
    }
    id = setInterval(animate, 10);
}

HTML:

<button onclick="move(text_ex)">Click</button>       
<div id="text_ex" style="width:100px; height:100px; background-color:red"></div>

我的代码有什么问题(它不起作用)？

欢迎任何其他解决方案。

Answer 1

将 position:absolute 添加到您的 div 中，它将像魅力一样发挥作用。