Gabungan animasi jQuery dan CSS3 mencapai kesan mengejar gerakan perlahan dengan kod sumber download_jquery

Kedua-dua CSS3 dan jquery boleh mencapai kesan mengejar pelonggaran, tetapi mempertimbangkan keserasian penyemak imbas, adalah disyorkan untuk menggunakan kaedah animasi jquery untuk mencapainya.

Biar saya tunjukkan kepada anda kesan pelaksanaan seperti berikut:

Demonstrasi kesan Muat turun kod sumber

Fail yang dirujuk: 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();
})
}

Di atas adalah gabungan animasi jQuery dan CSS3 yang diperkenalkan oleh editor untuk mencapai kesan mengejar gerakan perlahan. Saya harap ia akan membantu semua orang.