请问一下JQ如何给一个元素根据情况绑定多个点击事件？
写了一个div，想让div第一次点击的时候向右边移动，第二次点击的时候向下移动，第三次向左移动，第四次向上移动，也就是矩形的路线，可是我的代码只能实现一轮点击，也就是执行完一个矩形的点击事件之后再点击就没反应了，求帮忙。。我想让它能循环点击事件代码如下：
程序代码：<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>动画</title>
<style>
* {padding:0;margin:0;}
#main {width:100px;height:100px;cursor:pointer;background-color:skyblue;position:relative;}
</style>
<script type='text/javascript' src='./jQuery/jquery-3.1.1.js'></script>
<script>
$(function(){
$('#main').unbind('click').click(function(){
$(this).animate({'left':'800px'},3000); //向右
$('#main').unbind('click').click(function(){
$(this).animate({'top':'500px'},3000); //向下
$('#main').unbind('click').click(function(){
$(this).animate({'left':'0px'},3000); //向左
$('#main').unbind('click').click(function(){
$(this).animate({'top':'0px'},3000); //向上
})
})
})
})
});
</script>
</head>
<body>
<div id='main'></div>
</body>
</html>
