Durch die Kombination von jQuery animate und CSS3 wird der Slow-Motion-Chasing-Effekt mit dem Quellcode download_jquery erzielt

Sowohl CSS3 als auch JQuery können den Easing-Chasing-Effekt erzielen, aber im Hinblick auf die Browserkompatibilität wird empfohlen, die JQuery-Animate-Methode zu verwenden, um dies zu erreichen.

Lassen Sie mich Ihnen den Implementierungseffekt wie folgt zeigen:

Effektdemonstration Quellcode-Download

Referenzierte Datei: 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();
})
}

Das Obige ist die vom Editor eingeführte Kombination aus jQuery animate und CSS3, um den Zeitlupenverfolgungseffekt zu erzielen. Ich hoffe, dass es für alle hilfreich ist!