小白對js不太熟悉，那麼請問，我如果js來做點擊按鈕，然後p經過5s移動到右邊500px的地方，這種效果的製作思路是啥？
是先寫好一個class，讓這些效果完全都達到了，然後用js來切換className麼？
但是在點擊事件裡面，把所有的css效果寫進去？ QUQ
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> p { width:100px; height:100px; background:red; transition:all 5s; } p:hover { width:300px; } #p1{ position:relative; width:100px; height:100px; } #p2{ position:absolute; width:100%; height:100%; background:#0f0; } #p2.p2{ width:200%; height:200%; } </style> </head> <body> <input type='button' id='btn1'/> <p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p> <p></p> <p id='p1'> <p id='p2'></p> </p> <p>鼠标移动到 p 元素上，查看过渡效果。</p> </body> <script> window.onload=function(){ var oBtn=document.getElementById("btn1"),op=document.getElementById("p2"); oBtn.onclick=function(){ op.className='p2'; } } </script> </html>
給你個簡單的demo看完就會了，這也只是方法中的一種，方法還有很多！
你要的是這樣麼？程式碼見下方， p 5s移動到500px，可以先給p設定好transition效果，加個移動到右邊的class, js主要做的就是給元素加個class
ps: 只是demo程式碼，沒考慮相容等等情況…
css3
.demo{ border:1px solid #fff; width:100px; height:50px; position:relative; left:0; transition: left 2s; } .run{ left:500px; }
<p class="demo"> </p>
(function(){ document.getElementsByClassName('demo')[0].onclick = function(){ this.className +=' run'; }; })()
可以用css，也可以直接用js寫。 css的話就用transition寫，具體的百度，點選事件發生時為元素加入一個class，改變樣式。 js的話就用settimeout，以你說的左邊距為例，一點一點改變左邊距，到達指定值時停止即cleartimeout
如樓上所說,如果是ie9以下,需要使用定時器做
var ele = document.getElementsByClassName('demo')[0] ele.onclick = function(){ var btn = this; setInterval(function(){ btn.style.left = parseInt(btn.style.left) + 1 + "px" },1) }
一般都是用css3的transition實現過渡效果，要動畫的話用animation，使用js比較耗性能，這裡有一些參考文章
transition
animation
css3d屬性
給你個簡單的demo看完就會了，這也只是方法中的一種，方法還有很多！
你要的是這樣麼？程式碼見下方， p 5s移動到500px，可以先給p設定好transition效果，加個移動到右邊的class, js主要做的就是給元素加個class
ps: 只是demo程式碼，沒考慮相容等等情況…
css3
可以用css，也可以直接用js寫。 css的話就用transition寫，具體的百度，點選事件發生時為元素加入一個class，改變樣式。 js的話就用settimeout，以你說的左邊距為例，一點一點改變左邊距，到達指定值時停止即cleartimeout
如樓上所說,如果是ie9以下,需要使用定時器做
一般都是用css3的
transition實現過渡效果，要動畫的話用animation，使用js比較耗性能，這裡有一些參考文章css3d屬性