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 相关文章推荐
用YUI做了个标签浏览效果
Feb 20 Javascript
用prototype实现的简单小巧的多级联动菜单
Mar 24 Javascript
js 数组的for循环到底应该怎么写?
May 31 Javascript
Kibo 用于处理键盘事件的Javascript工具库
Oct 28 Javascript
js打开新窗口方法整理
Feb 17 Javascript
对 jQuery 中 data 方法的误解分析
Jun 18 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
Nov 17 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
javascript实现手动点赞效果
Apr 09 Javascript
vue实现简单跑马灯效果
May 25 Javascript
ng-alain的sf如何自定义部件的流程
Jun 12 Javascript
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
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
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
JavaScript 字符编码规则
2009/05/04 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
nodejs获取本机内网和外网ip地址的实现代码
2014/06/01 NodeJs
JavaScript前补零操作实例
2015/03/11 Javascript
在Javascript中处理数组之toSource()方法的使用
2015/06/09 Javascript
Angular中$compile源码分析
2016/01/28 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
基于javascript的异步编程实例详解
2017/04/10 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
VUE实现强制渲染,强制更新
2019/10/29 Javascript
在antd中setFieldsValue和defaultVal的用法
2020/10/29 Javascript
分享一下Python数据分析常用的8款工具
2018/04/29 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
Pyqt5自适应布局实例
2019/12/13 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
django API 中接口的互相调用实例
2020/04/01 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
教育科学研究生自荐信
2013/10/09 职场文书
绘画专业自荐信
2014/07/04 职场文书
高中学校对照检查材料
2014/08/31 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
厉行节约工作总结
2015/08/12 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
让文件路径提取变得更简单的Python Path库
2021/05/27 Python
python3实现常见的排序算法(示例代码)
2021/07/04 Python