摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery動(dòng)畫停止</title> <style> .main{width: 700px;margin:0 auto; } .cont
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery動(dòng)畫停止</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移動(dòng)時(shí) 鼠標(biāo)移上div，動(dòng)畫停止</p>
<div>
<div></div>
</div>
</div>
</body>
</html>
批改老師：天蓬老師批改時(shí)間：2019-01-01 09:14:34
老師總結(jié)：$('.box').mouseout(function(){
$('.box').show(true)
}), 事件是jquery中的重要內(nèi)容, 這么簡(jiǎn)單的動(dòng)畫 ,都可以通過一些極期簡(jiǎn)單的動(dòng)畫實(shí)現(xiàn)