<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1{width:100px;height:100px;background: red;position: absolute;left:0;top:0;}
.box2{width:100px;height:100px;background: blue;position: absolute;left:0;top:130px;}
.line{width:1px;height:600px;background: black;position: absolute;top:0;left:500px;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="line"></div>
</body>
<script>
var obox1 = document.querySelector(".box1");
var obox2 = document.querySelector(".box2");
document.onclick = function(){
move(obox1,{left:600,top:30},function(){
move(obox2,{width:400,height:120})
});
}
Move function (ELE, Data, End) {
the clearInterval (ele.t);
ele.t the setInterval = (() => {
after 1 // timer is started, the timer is set to off state
var = OnOff to true;
for (Data in I var) {
var = iNow the parseInt (the getStyle (ELE, I));
var Speed = (Data [I] - iNow) /. 7;
Speed Speed = <0 Math.floor (Speed):? Math.ceil (Speed);
// must have all the attributes to target in order to clear the timer
// you can only get a property
// can only determine whether a property to target
// If you have a property to target, and must reset the counter is it? necessarily
// If there is not a property to the target, not necessarily clear timer !!!
IF (Data [I]! = iNow) {
// 3. However, after the set state, before closing the timer, determines whether or not the target properties, as long as there is not a property of the target, is not put into a closed state timer
OnOff = to false;
}
ele.style [I] = iNow + + Speed "PX";
}
// 2. The decision to close the state timer
IF (OnOff) {
the clearInterval (ele.t);
End End && () ;
}
}, 30);
}
function getStyle(ele,attr){
if(getComputedStyle){
return getComputedStyle(ele,false)[attr];
}else{
return ele.currentStyle[attr];
}
}
</script>
</html>