サマリー：stop()的用法 stop()含有兩個(gè)參數(shù)，stop(stopAll,goToEnd)，stopAll為true時(shí)，停止所有動(dòng)作；goToEnd為true時(shí)，瞬間完成動(dòng)作；（1）默認(rèn)stop(false,false)，停止當(dāng)前動(dòng)畫(huà)，隊(duì)列中其他動(dòng)畫(huà)可以繼續(xù)；（2）stop(false,true)，瞬間完成當(dāng)前動(dòng)作，隊(duì)列內(nèi)其他動(dòng)
stop()的用法
stop()含有兩個(gè)參數(shù)，stop(stopAll,goToEnd)，stopAll為true時(shí)，停止所有動(dòng)作；goToEnd為true時(shí)，瞬間完成動(dòng)作；
（1）默認(rèn)stop(false,false)，停止當(dāng)前動(dòng)畫(huà)，隊(duì)列中其他動(dòng)畫(huà)可以繼續(xù)；
（2）stop(false,true)，瞬間完成當(dāng)前動(dòng)作，隊(duì)列內(nèi)其他動(dòng)作繼續(xù)；
（3）stop(true,true)，隊(duì)列內(nèi)所有動(dòng)作全部瞬間完成。
（4）stop(true,false)是什么情況？stopAll所有都會(huì)停止，不會(huì)繼續(xù)瞬間完成。
所謂隊(duì)列
即一個(gè)事件內(nèi)觸發(fā)多個(gè)動(dòng)畫(huà)，即使操作的對(duì)象是相同的；
$('#btn10').click(function(){
$('#anm').animate({
width:'500px', height:'400px',
left:'200px', top:'300px',
opacity:0.4
},3000)
$('#anm').animate({
fontSize:'40px',
textIndent:'2em'
},3000)
})
// 同一個(gè)button的click事件寫(xiě)兩次也是可以的，不會(huì)報(bào)錯(cuò)，且效果跟上面一樣。
$('#btn10').click(function(){
$('#anm').animate({
width:'500px', height:'400px',
left:'200px', top:'300px',
opacity:0.4
},3000)
})
$('#btn10').click(function(){
$('#anm').animate({
fontSize:'40px',
textIndent:'2em'
},3000)
})完整代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery動(dòng)畫(huà)</title>
<script src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btn10').click(function(){
//動(dòng)作①
$('#anm').animate({
width:'500px', height:'400px',
left:'200px', top:'300px',
opacity:0.4
},3000)
//動(dòng)作②
$('#anm').animate({
fontSize:'40px',
textIndent:'2em'
},3000)
})
//停止
$('#btn11').click(function(){
$('div').stop(false,true)
})
})
</script>
</head>
<body>
<button type="button" id="btn10">animate</button>
<button type="button" id="btn11">stop</button>
<div id="anm" style="height: 60px; width: 300px; background-color: darkseagreen; position: absolute;">
<p>文字放大</p>
</div>
</body>
</html>END
添削の先生：滅絕師太添削時(shí)間：2018-11-13 09:14:43
先生のまとめ：總結(jié)的很全面，理解的比較透徹，繼續(xù)加油奧