摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery动画停止</title> <style> .main{width: 700px;margin:0 auto; } .cont
<!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>
批改老师：天蓬老师批改时间：2019-01-01 09:14:34
老师总结：$('.box').mouseout(function(){
$('.box').show(true)
}), 事件是jquery中的重要内容, 这么简单的动画 ,都可以通过一些极期简单的动画实现
