animate动画示例(泪奔的小孩)及stop和delay的使用
更新时间：2013年05月06日 17:44:48 作者：
实现原理：停止动画，当一个元素有一个动画队列时，停止的是当前动画，紧接着执行下一个动画，具体代码如下，感兴趣的朋友可以参考下哈，希望对你学习jquery动画有所帮助
复制代码 代码如下:
<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>
相关文章
这篇文章主要介绍了jQuery中:focus选择器用法,以实例形式分析了:focus选择器的功能、定义及匹配获取焦点元素的使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
Backstretch是一款简单的jQuery插件，可以帮助你给网页添加一个动态的背景图片，可以自动调整大小适应屏幕的尺寸，当然这样做的缺点是当图片尺寸比屏幕小的时候,图片会因为自动延伸而变形，所以我们可以劲量使用高分辨率大尺寸的图片做背景,更重要的是支持图片的自动切换2015-04-04
今天小编就为大家分享一篇jquery.param()实现数组或对象的序列化方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
这篇文章主要为大家详细介绍了jquery实现图片放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要介绍了提升jQuery的性能需要做好的七件事，希望真的帮助大家提升jQuery性能,需要的朋友可以参考下2016-01-01
这篇文章主要介绍了jQuery formValidator表单验证 的相关资料,需要的朋友可以参考下2016-01-01
JQuery Ajax通过Handler访问外部XML数据的代码
JQuery是一款不错的Javascript脚本框架，相信园子里的很多朋友对它都不陌生，我们在开发Web应用程序时难免会使用到Javascript脚本，而使用一款不错的脚本框架将会大大节省我们的开发时间， 并可以毫不费力地实现很多非常酷的效果。2010-06-06
本篇文章，小编将为大家介绍，在jQuery中 关于json空对象筛选替换，有需要的朋友可以参考一下2013-04-04
这篇文章主要介绍了jQuery源码解读之addClass()方法,注释形式较为详细的分析了addClass()方法的实现技巧与相关注意事项,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
jQuery是一种流行的JavaScript库，可以轻松地在网页中插入图片和文字。通过使用jQuery的插入功能，您可以在网页上动态地添加内容，从而提高用户体验。本文将介绍如何使用jQuery在图片和文字中插入内容，并提供一些实用的代码示例。2023-06-06
最新评论