Rumah > hujung hadapan web > tutorial js > Gabungan animasi jQuery dan CSS3 mencapai kesan mengejar gerakan perlahan dengan kod sumber download_jquery

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

WBOY
Lepaskan: 2016-05-16 15:05:06
asal
3076 orang telah melayarinya

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>
Salin selepas log masuk

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();
})
}
Salin selepas log masuk

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.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan