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 相关文章推荐
FCK调用方法..
Dec 21 Javascript
Javascript中的delete操作符详细介绍
Jun 06 Javascript
javascript数据类型示例分享
Jan 19 Javascript
简介JavaScript中Math.cos()余弦方法的使用
Jun 15 Javascript
jQuery UI设置固定日期选择特效代码分享
Aug 27 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
从零学习node.js之搭建http服务器(二)
Feb 21 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
微信开发之微信jssdk录音功能开发示例
Oct 22 Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 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
phpMyAdmin 安装及问题总结
2009/05/28 PHP
PHP 开源AJAX框架14种
2009/08/24 PHP
PHP常用文件操作函数和简单实例分析
2016/06/03 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
jQuery 源码分析笔记(3) Deferred机制
2011/06/19 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
python使用win32com在百度空间插入html元素示例
2014/02/20 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
python 如何调用远程接口
2020/09/11 Python
详解Django关于StreamingHttpResponse与FileResponse文件下载的最优方法
2021/01/07 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
CSS3教程(4):网页边框和网页文字阴影
2009/04/02 HTML / CSS
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
新东网科技Java笔试题
2012/07/13 面试题
自荐信的两点禁忌
2013/10/30 职场文书
成考报名单位证明范本
2014/01/16 职场文书
学期自我评价
2014/01/27 职场文书
红领巾广播站广播稿
2014/02/01 职场文书
国贸专业自荐信范文
2014/03/02 职场文书
运动会演讲稿
2014/05/07 职场文书
实习计划书范文
2015/01/16 职场文书
写好求职信的技巧解密
2019/05/14 职场文书
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android