求助JS鏈式動畫,寫在opacity之前的動畫可以鏈式執(zhí)行,但是一旦有這個屬性之后,后面的就不執(zhí)行了..求助
????function?startMove(obj,purpose,attr,fn){ ????????var?target=0; ????????clearInterval(obj.timer); ????????obj.timer=setInterval(function(){ ????????????var?speed?=?0; ????????????if(attr?==?'opacity'){ ????????????????target?=?Math.round(parseFloat(getStyle(obj,attr))*100); ????????????????purpose=purpose*100; ????????????}else{ ????????????????target=parseInt(getStyle(obj,attr)); ????????????} ????????????speed?=?(purpose-target)/10; ????????????speed?=?speed>0?Math.ceil(speed):Math.floor(speed); ???????????? ????????????if(target==purpose){ ????????????????clearInterval(obj.timer); ????????????????if(fn){ ????????????????????fn(); ????????????????} ????????????}else{ ????????????????target=target+speed; ????????????????if(attr?==?'opacity'){ ????????????????????obj.style.opacity=target/100; ????????????????}else{ ????????????????????obj.style[attr]=target+'px'; ????????????????} ????????????} ????????},30) ????} ????function?getStyle(obj,attr){ ????????if(obj.currentStyle){ ????????????return?obj.currentStyle[attr]; ????????}else{ ????????????return?getComputedStyle(obj,false)[attr]; ????????} ????}
上面是js代碼,下面是html代碼
<!DOCTYPE?html> <html> <head> ????<meta?charset="UTF-8"> ????<title>鏈式運動</title> ????<style?type="text/css"> ????*{margin:?0;padding:?0;} ????ul{list-style:?none;} ????ul?li{width:200px;height:?100px;background:?yellow;opacity:?0.3;border:?3px?solid?green;} ????</style> ????<script?type="text/javascript"?src="js/script.js"></script> ????<script> ????window.onload=function(){ ????????var?li?=?document.getElementsByTagName("li")[0]; ????????li.onmouseover=function(){ ????????????startMove(li,400,'width',function(){ ????????????????startMove(li,1,'opacity'); ????????????}); ????????} ????} ????</script> </head> <body> ????<ul> ????????<li></li> ????</ul> </body> </html>
這樣是可以鏈式執(zhí)行的,但是吧上面的順序換一下就不行了,求幫助
2017-11-08
第17行
startMove(li,1,'opacity');
應該是100
2017-08-21
這個改了之后還是有點問題,我把那個三元表達式重寫成if-else語句之后就好了......并不懂為什么,我的三元表達式有寫錯嗎T-T
2017-08-21
我把?purpose=purpose*100;刪掉了,然后把傳參換成了自己乘了100了就可以了,但是我不懂為什么,求個好心人解答一下,先謝謝了