animate动画示例(泪奔的小孩)及stop和delay的使用


Posted in Javascript onMay 06, 2013
<head> 
<title></title> 
<script src="jquery-1.9.1.js" type="text/javascript"></script> 
<style type="text/css"> 
img 
{ 
width:150px; 
height:200px; 
position:relative; 
} 
td{width:150px;height:200px;} 
table{border:solid 1px black;} 
</style> 
<script type="text/javascript"> 
$(function () { 
$('img').click(function () { 
$(this).animate({ left: '+=150px' }, 2000).animate({ left: '+=150px' }, 2000).animate({ top: '+=200px' }, 2000).animate({ left: '-=150px' }, 2000).animate({ left: '-=150px' }, 2000).animate({ top: '+=200px' }, 2000).animate({ left: '+=150px' }, 2000).animate({ left: '+=150px' }, 2000); 
}) 
//停止动画,当一个元素有一个动画队列时,停止的是当前动画,紧接着执行下一个动画 
$('#btnStop').click(function () { 
$('img').stop(); 
}) 
$('#btnYanChi').click(function () { 
$('img').delay(2000).hide(2000); 
}) 
}) 
</script> 
</head> 
<body> 
<table> 
<tr> 
<td> 
<img src="images/泪奔1.gif" /> 
</td> 
<td> 
  
</td> 
<td> 
  
</td> 
</tr> 
<tr> 
<td> 
  
</td> 
<td> 
  
</td> 
<td> 
  
</td> 
</tr> 
<tr> 
<td> 
  
</td> 
<td> 
  
</td> 
<td> 
  
</td> 
</tr> 
</table> 
<input id="btnStop" type="button" value="stop" /> 
<input id="btnYanChi" type="button" value="延迟执行" /> 
</body>
Javascript 相关文章推荐
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
May 27 Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
将json对象转换为字符串的方法
Feb 20 Javascript
js实现的动画导航菜单效果代码
Sep 10 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
基于JavaScript实现验证码功能
Apr 01 Javascript
JS设计模式之单例模式(一)
Sep 29 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 Javascript
jQuery动画animate方法使用介绍
May 06 #Javascript
JS修改css样式style浅谈
May 06 #Javascript
用JavaScript修改CSS属性的代码
May 06 #Javascript
Jquery带搜索框的下拉菜单
May 06 #Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 #Javascript
jquery高效反选具体实现
May 05 #Javascript
Jquery为a标签的href赋值实现代码
May 03 #Javascript
You might like
最简单的PHP程序--记数器
2006/10/09 PHP
PR值查询 | PageRank 查询
2006/12/20 PHP
php中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
FCKeditor添加自定义按钮
2008/03/27 PHP
php mssql 日期出现中文字符的解决方法
2009/03/10 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
php函数指定默认值方法的小例子
2013/12/04 PHP
js onload事件不起作用示例分析
2013/10/09 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
2013/11/19 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
2014/05/14 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
2018/10/20 Javascript
p5.js绘制旋转的正方形
2019/10/23 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
Python struct模块解析
2014/06/12 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
Django中Model的使用方法教程
2018/03/07 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
对Pandas DataFrame缺失值的查找与填充示例讲解
2018/11/06 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
Python文件操作的面试题
2013/06/22 面试题
Java如何支持I18N?
2016/10/31 面试题
英文求职信结束语大全
2013/10/26 职场文书
公司综合部的成员自我评价分享
2013/11/05 职场文书
思想汇报格式
2014/01/05 职场文书
幼师自我鉴定
2014/02/01 职场文书
团购业务员岗位职责
2014/03/15 职场文书
经销商订货会主持词
2014/03/27 职场文书
教育见习报告范文
2014/11/03 职场文书
pt-archiver 主键自增
2022/04/26 MySQL