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技术-屏蔽类
Aug 15 Javascript
基于JQuery的动态删除Table表格的行和列的代码
May 12 Javascript
JS仿flash上传头像效果实现代码
Jul 18 Javascript
javascript克隆对象深度介绍
Nov 20 Javascript
js实现拉伸拖动iframe的具体代码
Aug 03 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
JavaScript利用append添加元素报错的解决方法
Jul 01 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
vue页面切换到滚动页面显示顶部的实例
Mar 13 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 Javascript
Node.js API详解之 os模块用法实例分析
May 06 Javascript
vue实现几秒后跳转新页面代码
Sep 09 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
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
php ios推送(代码)
2013/07/01 PHP
php对数组排序代码分享
2014/02/24 PHP
php限制ip地址范围的方法
2015/03/31 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
js下用eval生成JSON对象
2010/09/17 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
深入学习JavaScript 高阶函数
2019/06/11 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
利用H5api实现时钟的绘制(javascript)
2020/09/13 Javascript
[53:29]完美世界DOTA2联赛循环赛 DM vs Matador BO2第二场 11.04
2020/11/05 DOTA
使用python编写脚本获取手机当前应用apk的信息
2014/07/21 Python
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
微信跳一跳游戏python脚本
2020/04/01 Python
python字符串string的内置方法实例详解
2018/05/14 Python
python实现画循环圆
2019/11/23 Python
django实现日志按日期分割
2020/05/21 Python
Opencv求取连通区域重心实例
2020/06/04 Python
python中pivot()函数基础知识点
2021/01/03 Python
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
Java面试题:请问一下代码输出是什么
2015/05/27 面试题
教师岗位职责
2013/11/17 职场文书
高中自我评价范文
2014/01/27 职场文书
倡议书格式
2014/08/30 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
逃出克隆岛观后感
2015/06/09 职场文书