这里写目录标题
试题回顾
记得曾经看到过这样一道题目：
写一个函数，实现第1s打印1， 第2s打印2 ... 第10s打印10
之前一直不理解这种题目是为了什么，
有点无聊。 直到最近要写一个简单动画， 用到了这种思想，
此时此刻，才恍然大悟。
–
题解
这个题写起来非常简单：
for(var i = 1; i < 11; i++) {
(function(i) {
setTimeout(function() {
console.log(i);
}, 1000 * i);
})(i)
}
控制台打印结果：
应用场景
现在，我们要实现这样一个动画：
从左到右，依次有6个橙色小盒子。
最左侧有个蓝色盒子。 点击move按钮时，蓝色小盒子一格一格的移动到最右侧。
如果只是这样的需求，css就可以写了。
而实际开发中，可能是每次点击都移动随机数量的格子数。 而这个随机数量，是从后端接口中获取。
这时候，我们就可以用上述试题中的思想来处理。
思路
1，设置6个li，横向排列。默认颜色为橙色
2，设置一个类，比如.active，当li有这个类名时，就显示蓝色。没有这个类名，就显示默认色。
3，此时，点击按钮，在第1s，就给下标为1的li，加上类名。同时去除其他li的类名。
在第2s，就给下标为2的li，加上类名。同时去除其他li的类名。
…
在最后1s， 就给最后一个li加上类名。
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击按钮，渐次移动盒子位置</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 300px;
margin: 20px 0 0 20px;
}
.box_ul {
width: 100%;
height: 50px;
list-style-type: none;
}
li {
float: left;
width: 50px;
height: 50px;
border-radius: 12px;
background-color: lightsalmon;
text-align: center;
line-height: 50px;
color: #fff;
font-weight: 600;
font-size: 20px;
}
li.active {
background-color: mediumslateblue;
}
.btn {
width: 100px;
height: 40px;
margin: auto;
margin-top: 30px;
background-image: radial-gradient(moccasin, mediumslateblue);
font-size: 22px;
text-align: center;
line-height: 40px;
color: #fff;
font-weight: 600;
border-radius: 12px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<ul class="box_ul">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<div class="btn">Move</div>
</div>
<script src="./jquery 3.6.0.js"></script>
<script>
var $len = $('.box_ul>li').length;
$('.btn').on('click', function() {
for (var i = 0; i < $len; i++) {
(function (i) {
setTimeout(function () {
$('ul').find('li').eq(i).addClass('active').siblings().removeClass('active');
}, 300 * i)
})(i)
}
})
</script>
</body>
</html>