JQuery animate and CSS3 are combined to achieve slow-moving Chase Effect. Source Code download is provided. jquerycss3

JQuery animate and CSS3 are combined to achieve slow-moving Chase Effect. Source Code download is provided. jquerycss3

Both CSS3 and jquery can achieve a slow chase effect. However, considering the compatibility of browsers, we recommend that you use the jquery animate method.

The following figure shows the implementation result:

Download demo source code

Reference file: jquery-1.11.1.min.js

Html

<div id="container"><div id="first"></div><div id="second"></div></div>

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 above is a small series of jQuery animate and CSS3 combined to achieve the effect of slow-moving Chase, I hope to help you!