最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jquery中animate和CSS3实现缓动追逐示例
时间:2015-03-25 编辑:简简单单 来源:一聚教程网
CSS3和jquery都可以实现缓动追逐效果,但是考虑到浏览器的兼容性,建议使用jquery animate方法来实现。 实现效果如下: 引用文件:jquery-1.11.1.min.js
html
代码
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();
})
}
效果如下
-
上一个: jquery表单验证之获得焦点提示
-
下一个: js判断某个元素是否在数组中示例
相关文章
- jQuery+CSS3实现点赞功能 06-25
- jquery animate step实现css3属性动画 07-22
- 解决jQuery/CSS3 transition与动画冲突 02-08
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31