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 相关文章推荐
javascript 表单验证常见正则
Sep 28 Javascript
js下利用控制器载入对应脚本
Jul 17 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
js判断一个字符串是否包含一个子串的方法
Jan 26 Javascript
基于Jquery实现表单验证
Jul 20 Javascript
jQuery序列化表单成对象的简单实现
Nov 29 Javascript
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
Vue 动态设置路由参数的案例分析
Apr 24 Javascript
vscode vue 文件模板的配置方法
Jul 23 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 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
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
php中ob函数缓冲机制深入理解
2015/08/03 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
浏览器兼容console对象的简要解决方案分享
2013/10/24 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
2014/01/06 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
整理关于Bootstrap过渡动画的慕课笔记
2017/03/29 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
精读《Vue3.0 Function API》
2020/05/20 Javascript
python网络编程学习笔记(一)
2014/06/09 Python
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
Python对象转JSON字符串的方法
2016/04/27 Python
win10环境下python3.5安装步骤图文教程
2017/02/03 Python
python虚拟环境的安装配置图文教程
2017/10/20 Python
Python找出最小的K个数实例代码
2018/01/04 Python
python2与python3共存问题的解决方法
2018/09/18 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
python函数与方法的区别总结
2019/06/23 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
keras topN显示,自编写代码案例
2020/07/03 Python
Python实现手绘图效果实例分享
2020/07/22 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
三好学生自我鉴定
2013/12/17 职场文书
小学二年级学生评语
2014/04/21 职场文书
工作建议书范文
2014/05/13 职场文书
千手观音观后感
2015/06/03 职场文书
太行山上观后感
2015/06/05 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
python保存图片的四个常用方法
2022/02/28 Python