一、需求描述
做一个进度条长度逐渐减少的动画，当进度条长度小于等于0时，关闭动画，并弹出透明底板显示新提示。
二、问题描述
初始代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
var progressLength = 180;
var timer = setInterval(function () {
progressLength -= 10;
$(".progress").animate({
width: progressLength
});
console.log("hh");
if (progressLength <= 0) {
clearInterval(timer);
$(".over").fadeIn(100);
}
}, 50);
|
遇到问题：
进度条递减的速度快于动画速度，导致动画还没执行完，progressLength就已经≤0，底板就弹出来了。
三、问题解决
首先，导致问题的原因是：
animate动画执行有默认时长，即1000（1s），就是第二个参数。
而先前设置的定时器执行时长是50，导致两厢不匹配，即animate函数域里外不是一个速度。
解决方法：（消灭时间差）
1.设置animate第二个参数，使执行时长等于外面定时器的执行时长；
（不推荐，因为两个函数之间总有执行上的时间差）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
var progressLength = 180;
var timer = setInterval(function () {
progressLength -= 10;
$(".progress").animate({
width: progressLength
},50);
console.log("hh");
if (progressLength <= 0) {
clearInterval(timer);
$(".over").fadeIn(100);
}
}, 50);
|
2.改animate为css，这样就变成静态函数，没有时间差了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
var progressLength = 180;
var timer = setInterval(function () {
progressLength -= 10;
$(".progress").css({
width: progressLength
});
console.log("hh");
if (progressLength <= 0) {
clearInterval(timer);
$(".over").fadeIn(100);
}
}, 50);
|
