The combination of jQuery animate and CSS3 achieves the slow motion chasing effect with source code download_jquery

Both CSS3 and jquery can achieve the easing chasing effect, but considering the compatibility of the browser, it is recommended to use the jquery animate method to achieve it.

Let me show you the implementation effect as follows:

Effect demonstration Source code download

Referenced 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 the combination of jQuery animate and CSS3 introduced by the editor to achieve the slow motion chasing effect. I hope it will be helpful to everyone!