jquery animate动画效果的例子
发布时间：2015-11-30 编辑：jiaochengji.com
分享一例使用jquery中animate函数实现动画显示效果的例子，学习下jquery animate函数的用法，有需要的朋友参考下。
jquery animate动画效果，如下图：
完整代码：
复制代码 代码示例:
<title>animate动画效果_脚本学堂_http://www.jbxue.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>
<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>
您可能感兴趣的文章：
上一篇：jquery animate实现图片轮换
下一篇：Jquery 选择器的用法介绍
[关闭]