Example of implementing slow-moving chase with animate and CSS3 in jquery

CSS3 and jquery can all implement ease chasing, but with browser compatibility, the jquery animate method is recommended. The implementation effect is as follows: Reference file: Jquery-1.11.1.min.js

Html

<div id= "Container" >
<div id= "a" ></div>
<div id= "Second" ></div>
</div>

Code
Jquery

var $first =$ (' #first ');
var $second =$ (' #second ');

(function () {
Move1 ();
Move2 ();
})()

function move1 () {
$first. Animate ({
"Left": 220,
"Top": 0
},400). Animate ({
"Left": 220,
"Top": 220
},400). Animate ({
"Left": 0,
"Top": 220
},400). Animate ({
"Left": 0,
"Top": 0
},function () {
Move1 ();
})
}
function Move2 () {
$second. Animate ({
"Right": 220,
"Bottom": 0
},400). Animate ({
"Right": 220,
"Bottom": 220
},400). Animate ({
"Right": 0,
"Bottom": 220
},400). Animate ({
"Right": 0,
"Bottom": 0
},function () {
Move2 ();
})
}

The effect is as follows