一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

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

效果如下


 

热门栏目