链式运动调用fn的时候，为什么clearInterval(timer)必须在if(fn){fn();}这段代码之前。放在后面就不起作用了。
来源：5-1 JS链式动画
慕粉3122678
2018-06-06 15:04
放在if(fn){fn();}代码之前：
window.onload = function(){
var oLi = document.getElementsByTagName('li');
for(var i=0;i<oLi.length;i++){
oLi[i].timer = null;
oLi[i].onmouseover = function(){
var _this = this;
startMove(_this,30,'opacity',function(){
startMove(_this,300,'width',function(){
startMove(_this,200,'height');
});
});
}
oLi[i].onmouseout = function(){
var _this = this;
startMove(_this,100,'height',function(){
startMove(_this,200,'width',function(){
startMove(_this,100,'opacity');
});
});
}
}
}
function startMove(obj,iTarget,attr,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
if (attr == 'opacity') {
var icur = parseFloat(getStyle(obj,attr)*100);
}else{
var icur = parseInt(getStyle(obj,attr));
}
var speed = (iTarget-icur)/10;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if (icur == iTarget) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}else if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';
obj.style.opacity = (icur+speed)/100;
}else{
obj.style[attr] = icur + speed + 'px';
}
},30)
}
function getStyle(obj,attr){
if (obj.currentStyle) {
return currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}放在if(fn){fn();}代码之后
window.onload = function(){
var oLi = document.getElementsByTagName('li');
for(var i=0;i<oLi.length;i++){
oLi[i].timer = null;
oLi[i].onmouseover = function(){
var _this = this;
startMove(_this,30,'opacity',function(){
startMove(_this,300,'width',function(){
startMove(_this,200,'height');
});
});
}
oLi[i].onmouseout = function(){
var _this = this;
startMove(_this,100,'height',function(){
startMove(_this,200,'width',function(){
startMove(_this,100,'opacity');
});
});
}
}
}
function startMove(obj,iTarget,attr,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
if (attr == 'opacity') {
var icur = parseFloat(getStyle(obj,attr)*100);
}else{
var icur = parseInt(getStyle(obj,attr));
}
var speed = (iTarget-icur)/10;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if (icur == iTarget) {
if (fn) {
fn();
}
clearInterval(obj.timer);
}else if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';
obj.style.opacity = (icur+speed)/100;
}else{
obj.style[attr] = icur + speed + 'px';
}
},30)
}
function getStyle(obj,attr){
if (obj.currentStyle) {
return currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
写回答
关注
1回答
-
- 慕神7088389
- 2018-06-08 15:47:54
因为startMove（）开头就有一个clearInterval(obj.timer);
fn()放前面先执行，就回调startMove（），然后直接停掉了定时器，然后就没有然后了。
JS动画效果
通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装
113925 学习 · 1443 问题
相似问题