Heim > Web-Frontend > js-Tutorial > Durch die Kombination von jQuery animate und CSS3 wird der Slow-Motion-Chasing-Effekt mit dem Quellcode download_jquery erzielt

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

WBOY
Freigeben: 2016-05-16 15:05:06
Original
3075 Leute haben es durchsucht

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>
Nach dem Login kopieren

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();
})
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage