<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>链式动画</title> <style> body,div{ margin: 0; padding:0; } #div1{ width:200px; height:100px; background-color:yellow; border:4px solid #000; opacity:0.3; } </style> <script> window.onload=function(){ var oDiv =document.getElementById(‘div1‘); oDiv.onmouseover =function(){ startMove(oDiv,‘width‘,400,function(){ startMove(oDiv,‘height‘,300,function(){ startMove(oDiv,‘opacity‘,100); }); }); }; oDiv.onmouseout = function(){ startMove(oDiv,‘opacity‘,30,function(){ startMove(oDiv,‘height‘,100,function(){ startMove(oDiv,‘width‘,200); }) }) } } function startMove(obj,attr,iTarget,fn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var icur = null; // 1.属性值 变量 if(attr == ‘opacity‘){ icur = Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur = parseInt(getStyle(obj,attr)); } var speed = (iTarget - icur)/8; // 2.速度 变速 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if(icur == iTarget){ // 3.判断是否暂停 变化过程 clearInterval(obj.timer); if(fn){ //链式 fn(); } }else{ if(attr == ‘opacity‘){ obj.style.opacity = (icur +speed)/100; }else{ obj.style[attr] = icur + speed + ‘px‘; } } },30) } function getStyle(obj,attr){ //获取任意属性 if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } </script> </head> <body> <div id="div1"></div> </body> </html>
原文：https://www.cnblogs.com/Fourteen-Y/p/11957896.html