課程
/前端開發
/JavaScript
/JS動畫效果
我已經蹦了啊,要么不能實現同時運動到目標值,要么不能實現鏈式運動,已經試了將判斷句放到各種位置,還是不能完美解決,哎!
2015-08-26
源自:JS動畫效果 6-2
正在回答
將“var flag=true;”放入定時器內部,for in 循環的外部,解決定時器不能停止的問題。部分代碼:
obj.timer=setInterval(function?(){//定時器???????????? ????????var?flag?=?true;//放在這里 ????????????for(var?attr?in?json)//for?in?循環 ????????????{ ????????????//for?in??內部 ????????????}
具體解釋就是:第一次進入定時器,flag被定義,賦值為true,接著進入for in循環,for in中會判斷各個屬性是否達成目的,只要有一項未達成,將flag置為false,此時flag=false;跳出 for in循環后,判斷,flag是否為true,部分代碼:
????????????if(flag)//判斷 ????????????{ ????????????????clearInterval(obj.timer);//清空定時器
因為flag=false,所以if(flag)不成立,不清空定時器;燃火
第二次進入定時器,定時器內第一行,flag被置為true,接著進入for in循環,for in中繼續判斷,若有一項未達成,flag又被置為false;跳出for in循環后,判斷是否清楚定時器;。。。。第三次進入、第四次進入,如此反復,當for in中全部達成時,flag不會被置為false,此時flag=true;跳出 for in循環,判斷if(flag)成立,清除定時器,over。
鏈式運動問題:不能進行鏈式運動的最大阻礙是回調函數的參數傳遞問題;
方案A:
這是替換定時器中判斷是否停止定時器那部分代碼:
????????????if(flag) ????????????{ ????????????????clearInterval(obj.timer); ????????????????if(fn) ????????????????{ ????????????????????fn(obj);//將本次對象作為參數傳入回調函數 ????????????????????//fn.call(obj);//對象替換 ????????????????}
添加方法時的代碼:
window.onload=function(){ ????????var?oLi?=?document.getElementById('li1'); ????????oLi.onmouseover=function(){ ????????????startMove(oLi,{width:400,height:200,opacity:100},function(obj){//有參數 ????????????????startMove(obj,{width:200,height:100,opacity:30},function(obj){//有參數 ????????????????????//startMove(obj,{width:400,height:200,opacity:100});//傳遞參數 ????????????????}); ????????????}); ????????} }
方案B:
定時器中:
if(flag) ????????????{ ????????????????clearInterval(obj.timer); ????????????????if(fn) ????????????????{ ????????????????????//fn(obj);//將本次對象作為參數傳入回調函數 ????????????????????fn.call(obj);//對象替換 ????????????????}
window.onload=function(){ ????????var?oLi?=?document.getElementById('li1'); ????????oLi.onmouseover=function(){ ????????????startMove(oLi,{width:400,height:200,opacity:100},function(){//無參數 ????????????????startMove(this,{width:200,height:100,opacity:30},function(){//無參數 ????????????????????//startMove(this,{width:400,height:200,opacity:100});//傳遞this ????????????????}); ????????????}); ????????} }
其余代碼,參考老師寫的,這里是將對應的部位進行替換。如果運行有問題,稍微調試下,看看變量名、參數順序是否對應。我自己測試,沒有問題。
最后:下面這段代碼緊跟flag=false;后面較為合理
if(attr=='opacity') { ????obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')'; ????obj.style.opacity=(iCur+iSpeed)/100; } else { ????obj.style[attr]=iCur+iSpeed+'px'; }
marshall_stan 提問者
木木380
不好意思寫錯了。只需要將定義的flag=true;放入計時器中即可以完美解決問題。記住重新在瀏覽器中打開。
東風破
一布工程師
只需要將定義的flag=true;放入for循環即可以完美解決問題。記住重新在瀏覽器中打開。
舉報
通過本課程JS動畫的學習,從簡單動畫開始,逐步深入各種動畫框架封裝
8 回答完美運動框架,不能實現鏈式運動哇!
2 回答加了flag判斷后,不能執行鏈式運動了 ?
1 回答為什么實現不了同時運動
1 回答鏈式運動只能一個運動結束后才能下一個如何實現兩個運動同時運動
2 回答為什么給多個對象就不能實現鏈式運動了?用1個運動還是可以的。
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2015-11-10
將“var flag=true;”放入定時器內部,for in 循環的外部,解決定時器不能停止的問題。部分代碼:
具體解釋就是:第一次進入定時器,flag被定義,賦值為true,接著進入for in循環,for in中會判斷各個屬性是否達成目的,只要有一項未達成,將flag置為false,此時flag=false;跳出 for in循環后,判斷,flag是否為true,部分代碼:
因為flag=false,所以if(flag)不成立,不清空定時器;燃火
第二次進入定時器,定時器內第一行,flag被置為true,接著進入for in循環,for in中繼續判斷,若有一項未達成,flag又被置為false;跳出for in循環后,判斷是否清楚定時器;。。。。第三次進入、第四次進入,如此反復,當for in中全部達成時,flag不會被置為false,此時flag=true;跳出 for in循環,判斷if(flag)成立,清除定時器,over。
鏈式運動問題:不能進行鏈式運動的最大阻礙是回調函數的參數傳遞問題;
方案A:
這是替換定時器中判斷是否停止定時器那部分代碼:
添加方法時的代碼:
方案B:
定時器中:
添加方法時的代碼:
其余代碼,參考老師寫的,這里是將對應的部位進行替換。如果運行有問題,稍微調試下,看看變量名、參數順序是否對應。我自己測試,沒有問題。
最后:下面這段代碼緊跟flag=false;后面較為合理
2015-08-31
不好意思寫錯了。只需要將定義的flag=true;放入計時器中即可以完美解決問題。記住重新在瀏覽器中打開。
2015-08-31
只需要將定義的flag=true;放入for循環即可以完美解決問題。記住重新在瀏覽器中打開。