如何使用JavaScript動畫對象？

我想動畫一個對象（在我的例子中，一個div），從左到右移動100px，使用JUST javascript（不允許JQuery）。我的代碼http://pastebin.com/HvNjQES0。如何使用JavaScript動畫對象？

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>

什麼是我的代碼的問題（它不會工作）？

歡迎任何其他解決方案。

來源

2013-03-24 bloomingsmilez

它的方式更有助於建立你的[jsbin]代碼（http://jsbin.com）或[的jsfiddle]（ http://jsfiddle.net）。準確地描述你的代碼出了什麼問題也是非常重要的：換句話說，你期望它做什麼以及它做了什麼，還包括任何錯誤消息或其他顯式的由網絡瀏覽器提供的反饋 – Pointy 2013-03-24 14:57:04

您是否看到控制檯中的任何語句？沒有定位絕對或相對的元素將忽略「left」屬性。請參閱http://www.w3.org/wiki/CSS/Properties/left。這可能是問題 – 2013-03-24 14:58:35

只是一個提示：不像alert，你可以傳遞多個參數到console.log，它們甚至不必是字符串：'console.log（「elem」，elem.style.left）' – hugomg 2013-03-24 15:00:35

將position:absolute添加到您的div，它將像魅力一樣工作。

來源

2013-03-24 15:02:23

首先，如果你想使div活動，你需要或者設置它的display風格absolute或relative。

其次，在你的動畫功能，你需要通過document.getElementById(elem)獲得元素「;

來源

2013-03-24 15:02:49 Shuping

如何使用JavaScript動畫對象？

回答

相關問題