实现原理：停止动画，当一个元素有一个动画队列时，停止的是当前动画，紧接着执行下一个动画，具体代码如下，感兴趣的朋友可以参考下哈，希望对你学习jquery动画有所帮助
复制代码 代码如下:
<head>
<title></title>
<script src="https://www.jb51.net/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="https://www.jb51.net/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 type="button" value="stop" />
<input type="button" value="延迟执行" />
</body>