如何在一个实现，我点一下DIV然后他开始执行自定义动画，在点一下就停止。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{width: 100px;height: 100px;background-color:blue; position: absolute; margin: 0px ;}
</style>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var c=1;
$('.start').click(function(){
$('.but').animate({ left:'500px',
top:'500px',
opacity:'0.5'
},3000)
})
$('.stop').click(function(){
$('.but').stop();
})
switch(c){
case 1:
$('.but').click(function(){
$('.but').animate({
left:'500px',
top:'500px',
opacity:'0.5'
},3000); })
c++;
break;
case 2:
/*$(".but").unbind();*/
$('.but').click(function(){
$('.but').stop(); })
document.write(c)
c--;
break;
default:break; }
})
</script>
</head>
<body>
<button>开始</button>
<button>停止</button> <!-- <button>开始</button> -->
<div></div>
</body>
</html>