复制代码 代码如下:
<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>
【animate动画示例(泪奔的小孩)及stop和delay的使用】相关文章：
★ JavaScript中的this,call,apply使用及区别详解
★ 介绍JavaScript中Math.abs()方法的使用
★ JavaScript实际应用：innerHTMl和确认提示的使用
★ JavaScript正则表达式中的global属性的使用