小白對(duì)js不太熟悉，那麼請(qǐng)問(wèn)，我如果js來(lái)做點(diǎn)擊按鈕，然後p經(jīng)過(guò)5s移動(dòng)到右邊500px的地方，這種效果的製作思路是啥？
是先寫好一個(gè)class，讓這些效果完全都達(dá)到了，然後用js來(lái)切換className麼？
但是在點(diǎn)擊事件裡面，把所有的css效果寫進(jìn)去？ QUQ
6
0
0
<!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>該實(shí)例無(wú)法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
<p></p>
<p id='p1'>
<p id='p2'></p>
</p>
<p>鼠標(biāo)移動(dòng)到 p 元素上，查看過(guò)渡效果。</p>
</body>
<script>
window.onload=function(){
var oBtn=document.getElementById("btn1"),op=document.getElementById("p2");
oBtn.onclick=function(){
op.className='p2';
}
}
</script>
</html>
給你個(gè)簡(jiǎn)單的demo看完就會(huì)了，這也只是方法中的一種，方法還有很多！
你要的是這樣麼？程式碼見下方， p 5s移動(dòng)到500px，可以先給p設(shè)定好transition效果，加個(gè)移動(dòng)到右邊的class, js主要做的就是給元素加個(gè)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寫，具體的百度，點(diǎn)選事件發(fā)生時(shí)為元素加入一個(gè)class，改變樣式。 js的話就用settimeout，以你說(shuō)的左邊距為例，一點(diǎn)一點(diǎn)改變左邊距，到達(dá)指定值時(shí)停止即cleartimeout
如樓上所說(shuō),如果是ie9以下,需要使用定時(shí)器做
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實(shí)現(xiàn)過(guò)渡效果，要?jiǎng)赢嫷脑捰?code>animation，使用js比較耗性能，這裡有一些參考文章
