夏日博客

A-A+

jquery中animate和CSS3实现缓动追逐示例

2016年01月10日 前端设计 暂无评论 阅读 8 views 次

在jquery中animate方法可以实事效果慢慢加载了，下面我们给各位整理了一个jquery中animate和CSS3实现缓动追逐示例，希望此例子对各位有帮助。

CSS3和jquery都可以实现缓动追逐效果，但是考虑到浏览器的兼容性，建议使用jquery animate方法来实现,实现效果如下:引用文件：jquery-1.11.1.min.js

html:

  1. <div id="container">  
  2.   <div id="first"></div>  
  3.   <div id="second"></div>  
  4. </div>  

jquery:

  1. var $first=$('#first');  
  2. var $second=$('#second');  
  3.   
  4. (function(){  
  5.   move1();  
  6.   move2();  
  7. })()  
  8.   
  9. function move1(){  
  10.   $first.animate({  
  11.     "left":220,  
  12.     "top": 0  
  13.   },400).animate({  
  14.     "left":220,  
  15.     "top":220  
  16.   },400).animate({  
  17.     "left":0,  
  18.     "top":220  
  19.   },400).animate({  
  20.     "left":0,  
  21.     "top":0  
  22.   },function(){  
  23.     move1();  
  24.   })  
  25. }  
  26. function move2(){  
  27.   $second.animate({  
  28.     "right":220,  
  29.     "bottom": 0  
  30.   },400).animate({  
  31.     "right":220,  
  32.     "bottom":220  
  33.   },400).animate({  
  34.     "right":0,  
  35.     "bottom":220  
  36.   },400).animate({  
  37.     "right":0,  
  38.     "bottom":0  
  39.   },function(){  
  40.     move2();  
  41.   })  
  42. }  
标签：

给我留言