(42) JS motion multi-object framework-widening multiple div

(42) JS motion multi-object framework-widening multiple div

If only one timer is added for the div, a problem occurs when multiple divs become wide. However, if you add a timer for each div, you can increase the width of multiple objects. Note: When multiple objects are moving, nothing can be shared. OffsetXXX conflicts with border and thus cannot obtain desired results. Here, you can use the getStyle () function instead.

function getStyle(obj, name){if(obj.currentStyle){return obj.currentStyle[name];}else{return getComputedStyle(obj, false)[name];}}

  <script>window.onload=function (){var aDiv=document.getElementsByTagName('div');for(var i=0;iseover=function (){startMove(this,400);};aDiv[i].onmouseout=function (){startMove(this,100);};}};var timer=null;function startMove(obj, iTarget){clearInterval(obj.timer);obj.timer=setInterval(function (){var speed=(iTarget-obj.offsetWidth)/6;speed=speed>0?Math.ceil(speed):Math.floor(speed);if(obj.offsetWidth==iTarget){clearInterval(obj.timer);}else{obj.style.width=obj.offsetWidth+speed+'px';}}, 30);}</script>                     

: