AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

jQuery animate和CSS3相结合实现缓动追逐效果附源码下载

51自学网 http://www.wanshiok.com
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();})}

以上所述是小编给大家介绍的jQuery animate和CSS3相结合实现缓动追逐效果,希望对大家有所帮助!


jquery_animate缓动,css3缓动  
上一篇:AngularJS入门教程之AngularJS表达式  下一篇:jQuery使用$.each遍历json数组的简单实现方法