小方块同时改变 width height top left opacity(透明度) 加回调函数 改变第二个方块。
效果如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 div { 11 width: 100px; 12 height: 100px; 13 opacity: 0.1; 14 background-color: red; 15 position: absolute; 16 left: 0; 17 } 18 19 #topDiv { 20 top: 100px; 21 22 } 23 24 #bottomDiv { 25 top: 300px; 26 } 27 </style> 28 </head> 29 30 <body> 31 <div id="topDiv"></div> 32 33 <div id="bottomDiv"></div> 34 35 </body> 36 <script> 37 38 var topDiv = document.getElementById("topDiv"); 39 var bottomDiv = document.getElementById("bottomDiv"); //选择两个小方块 40 41 //获取css样式函数 42 function getStyle(dom, attr) { //兼容ie 获取css样式 43 if (window.getComputedStyle) { 44 return window.getComputedStyle(dom, null)[attr]; 45 } else { 46 return dom.currentStyle[attr]; 47 } 48 } 49 //绑定事件函数 50 function addEvent(ele, type, handle) { //兼容ie 绑定事件 51 if (ele.addEventListener) { 52 return ele.addEventListener(type, handle, false); 53 } else if (ele.attachEvent) { 54 ele.attachEvent('on' + type, function () { 55 handle.call(ele); 56 }) 57 } else { 58 ele['on' + type] = handle; 59 } 60 } 61 62 addEvent(topDiv, "click", function () {//绑定事件 63 startMove(this, { 400, height: 400, top: 200, left: 300, opacity: 1 }, function () { 64 //传入第一个值为 dom， 第二个值为对象方式 键 => 值 第三个为回调函数， 65 startMove(bottomDiv, { 400, height: 400, top: 200, left: 800, opacity: 1 }, function () { 66 alert("over"); 67 }); 68 }) 69 }) 70 71 72 73 function startMove(dom, attrObj, callback) { 74 clearInterval(dom.timer); 75 //清理上个定时器，如果不清理上个定时器，多次调用同个函数会导致同时执行多个定时器，会发生很好玩的现象，多个定时器同时抢行。 76 if (attrObj.opacity) { 77 attrObj.opacity *= 100; 78 //判断传进来的对象中是否有opacity，有的话 把数放大一百倍。 79 //因为opacity的值 是在 0 ~ 1 之间，如果放大一百倍，处理小数点也不怕。下面代码会直接把小数点给干掉 80 //92行的代码会干掉小数点 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); 三目运算符 81 } 82 83 dom.timer = setInterval(function () { 84 var speed = null, iCur = null;//iCur 用来存要修改值的当前值 85 var bStop = true; //用来记录 物体是否 运行到目标点，如果没有就为flase，如果为true，停止定时器， 86 87 for (var attr in attrObj) { 88 if (attr == "opacity") { 89 iCur = parseFloat(getStyle(dom, attr)) * 100; 90 //传进来的值放大一百倍， 当前的opacity值也要放大一百倍 91 } else { 92 iCur = parseInt(getStyle(dom, attr)); 93 //获取要改变的物体当前值。 94 } 95 96 speed = (attrObj[attr] - iCur) / 7;//物体的速度 距离目标点越近，就越小 当到达目标点时，速度减小为0 97 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); 98 //舍弃计算之后的小数点，没见过哪个页面的 width和height的值带小数点的吧 99 100 if (attr == "opacity") { 101 dom.style.opacity = (speed + iCur) / 100; 102 //计算完速度后 把放大一百倍的数值 恢复原状，赋值 103 } else { 104 dom.style[attr] = speed + iCur + 'px'; 105 } 106 107 if (attrObj[attr] !== iCur) { 108 bStop = false; 109 //判断 元素的当前值 是否已经运动 到目标点， 110 //如果不到，把bStop 变成false， 定时器不会停止，只要进来一次，说明还没有运动到目标点,继续运行。 111 //只要 没有进来过判断，说明，全部要运动的 width height 等 已经到达目标点， 112 113 } 114 } 115 if (bStop) { 116 clearInterval(dom.timer);//bStop 为true的时候，说明 全部已经到点，可以停止定时器了， 117 callback();//定时器停止后，执行回调函数， 这个函数会等到 startMove()执行完毕后触发。 118 119 } 120 }, 30) 121 } 122 </script> 123 124 </html>
附上没有注释的代码，有时候有注释的代码 看起来 还比较复杂
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 div { 11 width: 100px; 12 height: 100px; 13 opacity: 0.1; 14 background-color: red; 15 position: absolute; 16 left: 0; 17 } 18 19 #topDiv { 20 top: 100px; 21 22 } 23 24 #bottomDiv { 25 top: 300px; 26 } 27 </style> 28 </head> 29 30 <body> 31 <div id="topDiv"></div> 32 33 <div id="bottomDiv"></div> 34 35 </body> 36 <script> 37 38 var topDiv = document.getElementById("topDiv"); 39 var bottomDiv = document.getElementById("bottomDiv"); 40 41 42 function getStyle(dom, attr) { 43 if (window.getComputedStyle) { 44 return window.getComputedStyle(dom, null)[attr]; 45 } else { 46 return dom.currentStyle[attr]; 47 } 48 } 49 50 function addEvent(ele, type, handle) { 51 if (ele.addEventListener) { 52 return ele.addEventListener(type, handle, false); 53 } else if (ele.attachEvent) { 54 ele.attachEvent('on' + type, function () { 55 handle.call(ele); 56 }) 57 } else { 58 ele['on' + type] = handle; 59 } 60 } 61 62 addEvent(topDiv, "click", function () { 63 startMove(this, { 400, height: 400, top: 200, left: 300, opacity: 1 }, function () { 64 startMove(bottomDiv, { 400, height: 400, top: 200, left: 800, opacity: 1 }, function () { 65 alert("over"); 66 }); 67 }) 68 }) 69 70 71 72 function startMove(dom, attrObj, callback) { 73 clearInterval(dom.timer); 74 if (attrObj.opacity) { 75 attrObj.opacity *= 100; 76 } 77 78 dom.timer = setInterval(function () { 79 var speed = null, iCur = null; 80 var bStop = true; 81 82 for (var attr in attrObj) { 83 if (attr == "opacity") { 84 iCur = parseFloat(getStyle(dom, attr)) * 100; 85 } else { 86 iCur = parseInt(getStyle(dom, attr)); 87 } 88 //物体的速度 距离目标点越近，就越小 当到达目标点时，速度减小为0 89 speed = (attrObj[attr] - iCur) / 7; 90 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); 91 if (attr == "opacity") { 92 dom.style.opacity = (speed + iCur) / 100; 93 } else { 94 dom.style[attr] = speed + iCur + 'px'; 95 } 96 97 if (attrObj[attr] !== iCur) { 98 bStop = false; 99 } 100 } 101 if (bStop) { 102 clearInterval(dom.timer); 103 callback(); 104 105 } 106 }, 30) 107 } 108 </script> 109 110 </html>