Home > Web Front-end > JS Tutorial > The combination of jQuery animate and CSS3 achieves the slow motion chasing effect with source code download_jquery

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

WBOY
Release: 2016-05-16 15:05:06
Original
3075 people have browsed it

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>
Copy after login

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();
})
}
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template