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!