A combination of jQuery animate and CSS3 to implement the easing chasing effect with source download _jquery

CSS3 and jquery can all implement ease chasing, but with browser compatibility, the jquery animate method is recommended.

First show you the implementation of the results are as follows:

Effect Demo Source Download

Referencing files: jquery-1.11.1.min.js

Html

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

Jquery

var $first =$ (' #first ');
var $second =$ (' #second ');
(function () {
move1 ();
Move2 ();
}) ()
function move1 () {
$first. Animate ({
"left": "The",
"top": 0
},400). Animate ({
"left": 220 ,
"Top": the
},400). Animate ({
"left": 0,
"top":
},400). Animate ({
"left": 0,
"Top": 0
},function () {
move1 ();
})
}
function Move2 () {
$second. Animate ({
"right":,
"bottom": 0
},400). Animate ({
' right ' :
"Bottom":
},400). Animate ({
"right": 0,
"bottom":},400
). Animate ({
" Right ": 0,
" bottom ": 0
},function () {
move2 ();
})
}

The above is a small series to introduce the jquery animate and CSS3 combined to achieve slow pursuit effect, I hope to help you!