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


Posted in Javascript onApril 18, 2016

CSS3和jquery都可以实现缓动追逐效果,但是考虑到浏览器的兼容性,建议使用jquery animate方法来实现。

先给大家展示下实现效果如下:

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

效果演示        源码下载

引用文件: 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相结合实现缓动追逐效果,希望对大家有所帮助!

Javascript 相关文章推荐
jQuery的Ajax的自动完成功能控件简要说明
Feb 22 Javascript
js中定义一个变量并判断其是否为空的方法
May 13 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
JavaScript中的fontsize()方法使用详解
Jun 08 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
jquery过滤特殊字符',防sql注入的实现方法
Aug 17 Javascript
BootStrap tab选项卡使用小结
Aug 09 Javascript
原生js编写焦点图效果
Dec 08 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
BootStrap Select清除选中的状态恢复默认状态
Jun 20 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 #Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 #Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 #Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 #Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 #Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 #Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 #Javascript
You might like
目录,文件操作详谈―PHP
2006/11/25 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
javascript与webservice的通信实现代码
2010/12/25 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
JavaScript静态类型检查工具FLOW简介
2015/01/06 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
几种tab切换详解
2017/02/03 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
NodeJS使用七牛云存储上传文件的方法
2017/07/24 NodeJs
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
2019/01/18 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
用Python登录好友QQ空间点赞的示例代码
2017/11/04 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
两个元祖T1=('a', 'b'),T2=('c', 'd')使用匿名函数将其转变成[{'a': 'c'},{'b': 'd'}]的几种方法
2019/03/05 Python
深入学习python多线程与GIL
2019/08/26 Python
如何给Python代码进行加密
2020/01/10 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
详解python中的异常和文件读写
2021/01/03 Python
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
机械制造毕业生求职信
2014/03/03 职场文书
班级课外活动总结
2014/07/09 职场文书
领导班子奢靡之风查摆问题及整改措施
2014/09/27 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
Ajax是什么?Ajax高级用法之Axios技术
2021/04/21 Javascript