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 相关文章推荐
Opacity.js
Jan 22 Javascript
JavaScript语法着色引擎(demo及打包文件下载)
Jun 13 Javascript
javascript:以前写的xmlhttp池,代码
May 18 Javascript
浅析javascript闭包 实例分析
Dec 25 Javascript
JavaScript  event对象整理及详细介绍
Oct 10 Javascript
详解webpack进阶之插件篇
Jul 06 Javascript
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
JavaScript实现五子棋小游戏
Oct 26 Javascript
Vue实现todo应用的示例
Feb 20 Vue.js
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的单引号和双引号 字符串效率
2009/05/27 PHP
php下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
php的4种常见运行方式
2015/03/20 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
jquery中实现标签切换效果的代码
2011/03/01 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
laydate.js日期时间选择插件
2017/01/04 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
2021/01/13 Vue.js
如何用Python实现简单的Markdown转换器
2018/07/16 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
python修改字典键(key)的方法
2019/08/05 Python
初中班主任评语大全
2014/04/24 职场文书
人大调研汇报材料
2014/08/14 职场文书
学习心理学的体会
2014/11/07 职场文书
检讨书格式
2015/01/23 职场文书
个园导游词
2015/02/04 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
小学四年级作文之最感动的一件事
2019/11/01 职场文书
python热力图实现的完整实例
2022/06/25 Python