小白对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属性