只能實現單獨的動畫效果,鏈式動畫不能夠執行。
<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>完美動畫</title>
<style?type="text/css">
*{
margin:?0;
padding:?0;
}
#li1{
width:?400px;
height:?100px;
background:?green;
border:?2px?solid?blue;
opacity:?0.3;
}
</style>
<script?src="js/move.js"></script>
<script?type="text/javascript">
window.onload=function(){
var?aLi=document.getElementById('li1');
aLi.timmer=null;
aLi.onmouseover=function(){
startMove(aLi,'height',200,function(){
alert(1);
});
}
}
</script>
</head>
<body>
<ul>
<li?id="li1"></li>
</ul>
</body>
</html>function?getStyle(obj,?atttr)?{
if(obj.currentStyle)?{
return?obj.currentStyle[atttr];
}?else?{
return?getComputedStyle(obj,?false)[atttr];
}
}
function?startMove(obj,?attr,?iTarget,?fn)?{
clearInterval(obj.timmer);
obj.timmer?=?setInterval(function()?{
var?icur?=?0;
if(attr?==?'opacity')?{
icur?=?Math.round(parseFloat(getStyle(obj,?attr))?*?100);
}?else?{
icur?=?parseInt(getStyle(obj,?attr));
}
var?speed?=?(iTarget?-?icur)?/?8;
speed?=?speed?>?0???Math.ceil(speed)?:?Math.floor(speed);
if(iTarget?==?speed)?{
clearInterval(obj.timmer);
if(fn)?{
fn();
}
}?else?{
if(attr?==?'opacity')?{
obj.style.opacity?=?(icur?+?speed)?/?100;
}?else?{
obj.style[attr]?=?(icur?+?speed)?+?'px';
}
}
},?30);
}鼠標移動到Li上面以后,寬度能夠順利的改變,換成透明度,高度等也能夠執行。但是不能夠執行鏈式動畫,比如那個alert(1)。大神幫忙解答一下。。。。
2017-09-19
第20行,if(iTarget?==?speed)?
這里括號里應該是icur == iTarget才對。