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 animate和css3相结合实现缓动追逐效果,希望对大家有所帮助!