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优缺点分析说明
Apr 10 Javascript
JS实现日期加减的方法
Nov 29 Javascript
JavaScript中的style.cssText使用教程
Nov 06 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
Aug 12 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 Javascript
利用JS hash制作单页Web应用的方法详解
Oct 10 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
jQuery实现简单全选框
Sep 13 jQuery
你不知道的SpringBoot与Vue部署解决方案
Nov 09 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/10/09 PHP
PHP 程序员的调试技术小结
2009/11/15 PHP
PHP计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
深入探讨PHP中的内存管理问题
2011/08/31 PHP
浅析PHP 按位与或 (^ 、&amp;)
2013/06/21 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
destoon实现VIP排名一直在前面排序的方法
2014/08/21 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
extjs 学习笔记(一) 一些基础知识
2009/10/13 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
拥有一个属于自己的javascript表单验证插件
2016/03/24 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
vue实现点击追加选中样式效果
2019/11/01 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
Python实现全角半角转换的方法
2014/08/18 Python
python使用socket向客户端发送数据的方法
2015/04/29 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
Linux开机引导的步骤是什么
2015/10/19 面试题
物流业务员岗位职责
2014/02/08 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers