var contentbody = document.getElementById("main"),
timer = null,
i = 0;
if(contentbody.style.marginLeft=="")
{
timer = setInterval(function() {
i++;
contentbody.style.marginLeft=i + 'px';
}, 50);
if(parseInt(contentbody.style.marginLeft) > 50) {
clearInterval(timer);
}
}else{
contentbody.style.marginLeft="";
}
// 未自己运行，不保证代码完全正确，但是思路是这样的 demo:http://www.wusichao.com/demo/admin_template/
修改了JS代码，借着「看不懂未来」大神写的运动JS代码段来实现的，但是目前还有些问题，没办法停止，请各位大神帮忙看看。
伊谢尔伦2017-04-10 16:43:56
目测题主是想实现渐变变长的运动效果！
这是我自己封装运动全过程，从最基础到最终效果，例子全在里面
https://github.com/yangbo5207/front-end-road/tree/master/018.%20javascript%E6%A8%A1%E5%BC%8F/move
楼主想要的例子如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
}
body {
overflow: hidden;
}
.left {
width: 200px;
height: 100%;
background-color: orange;
float: left;
}
.content {
overflow: hidden;
height: 100%;
background-color: #ccc;
position: relative;
border: 1px solid red;
}
.btn {
position: absolute;
width: 40px;
height: 40px;
left: 10px;
top: 10px;
background-color: green;
}
</style>
</head>
<body>
<p class="left"></p>
<p class="content">
<p class="btn"></p>
</p>
</body>
<script>
$(function() {
var tag = false;
$('.btn').click(function() {
if (!tag) {
$('.left').animate({ width: 50 });
} else if (tag) {
$('.left').animate({ width: 200 });
};
tag = !tag;
})
})
</script>
</html>
// 注意布局的配合
大家讲道理2017-04-10 16:43:56
题意有些不明，说说你想实现什么吧？用这个for来实现？
我也想知道题主想问一个什么问题，没搞清楚要实现什么，搞不清楚要实现什么就不知道怎么搞啊！！！
黄舟2017-04-10 16:43:56
var contentbody = document.getElementById("main");
if(contentbody.style.marginLeft=="")
{
contentbody.style.marginLeft='width';
for(var width=0;width<50;width++){
//要实现的操作
}
}else{
contentbody.style.marginLeft="";
}
大家讲道理2017-04-10 16:43:56
你需要setTimeout： Demo
// 页面 domready 后执行
document.addEventListener('DOMContentLoaded', function(){
var main = document.getElementById('main');
loop(main);
});
var loop = function(obj, start, max, duration){
if(!obj) return false;
start = start || 0;
max = max || 200;
duration = duration || 17;
(function run(){
// 可以加任何条件判断，以跳出循环动画
if(max <= 0) return false;
if(start > max) start = 0;
// 下面是每隔一段时间执行动画的业务逻辑部分，可以修改
obj.style.marginLeft = start + 'px';
obj.style.marginTop = start + 'px';
obj.style.transform = 'rotate('+start*5+'deg) scale('+start/max+')';
// 该帧动画执行完毕后，width + 1，然后进行下一帧动画
start++;
setTimeout(run, duration);
})();
};