<title>animate动画效果_
脚本学堂_http://www.jb200.com</title>
<script src="jquery-1.9.1.js" type="text/
javascript"></script>
<style type="text/css">
.imgclass
{
width: 100px;
height: 100px;
border: solid 1px red;
position: absolute;
left: 20px;
top: 20px;
}
</style>
<script type="text/javascript">
$(function () {
$('img').click(function () {
$(this).animate({ left: '+=130px' }, 2000).animate({ left: '+=130px' }, 2000).animate({ top: '+=130px' }, 2000).animate({ left: '-=130px' }, 2000).animate({ left: '-=130px' }, 2000).animate({ top: '+=130px' }, 2000).animate({ left: '+=130px' }, 2000).animate({ left: '+=130px' }, 2000, function () {
$('img').hide(5000);
})
})
});
</script>
</head>
<body>
<div>
以下内容，用于显示jquery中animate函数的动画效果。
<img alt="" src="images/1.jpg" class="imgclass" />
<table border="1" width="400px" height="400px;">
<tr id="table1">
<td align="center">
1
</td>
<td align="center">
2
</td>
<td align="center">
3
</td>
</tr>
<tr id="table2">
<td align="center">
6
</td>
<td align="center">
5
</td>
<td align="center">
4
</td>
</tr>
<tr id="table3">
<td align="center">
7
</td>
<td align="center">
8
</td>
<td align="center">
9
</td>
</tr>
</table>
</div>
</body>
