jquery动画停止
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery动画停止</title>
<style>
.main{width: 700px;margin:0 auto;
}
.content{width: 700px;height: 700px;border:1px solid gray;}
.box{ position: relative;width: 200px;height: 200px;background: red }
</style>
<script type='text/javascript' src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.right').click(function(){
$('.box').animate({left:'500px'},3000)
})
$('.bottom').click(function(){
$('.box').animate({top:'500px'},3000)
})
$('.left').click(function(){
$('.box').animate({left:'0px'},3000)
})
$('.up').click(function(){
$('.box').animate({top:'0px'},3000)
})
$('.box').mouseover(function(){
$('.box').stop(true)
})
$('.box').mouseout(function(){
$('.box').show(true)
})
})
</script>
</head>
<body>
<div>
<button>右移</button>
<button>下移</button>
<button>左移</button>
<button>上移</button>
<p>div移动时 鼠标移上div，动画停止</p>
<div>
<div></div>
</div>
</div>
</body>
</html>
