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

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

html

<div id="container">
  <div id="first"></div>
  <div id="second"></div>
</div>

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

效果如下