摘要：stop()的用法 stop()含有兩個參數(shù)，stop(stopAll,goToEnd)，stopAll為true時，停止所有動作；goToEnd為true時，瞬間完成動作；（1）默認(rèn)stop(false,false)，停止當(dāng)前動畫，隊列中其他動畫可以繼續(xù)；（2）stop(false,true)，瞬間完成當(dāng)前動作，隊列內(nèi)其他動
stop()的用法
stop()含有兩個參數(shù)，stop(stopAll,goToEnd)，stopAll為true時，停止所有動作；goToEnd為true時，瞬間完成動作；
（1）默認(rèn)stop(false,false)，停止當(dāng)前動畫，隊列中其他動畫可以繼續(xù)；
（2）stop(false,true)，瞬間完成當(dāng)前動作，隊列內(nèi)其他動作繼續(xù)；
（3）stop(true,true)，隊列內(nèi)所有動作全部瞬間完成。
（4）stop(true,false)是什么情況？stopAll所有都會停止，不會繼續(xù)瞬間完成。
所謂隊列
即一個事件內(nèi)觸發(fā)多個動畫，即使操作的對象是相同的；
$('#btn10').click(function(){
$('#anm').animate({
width:'500px', height:'400px',
left:'200px', top:'300px',
opacity:0.4
},3000)
$('#anm').animate({
fontSize:'40px',
textIndent:'2em'
},3000)
})
// 同一個button的click事件寫兩次也是可以的，不會報錯，且效果跟上面一樣。
$('#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動畫</title>
<script src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btn10').click(function(){
//動作①
$('#anm').animate({
width:'500px', height:'400px',
left:'200px', top:'300px',
opacity:0.4
},3000)
//動作②
$('#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
批改老師：滅絕師太批改時間：2018-11-13 09:14:43
老師總結(jié)：總結(jié)的很全面，理解的比較透徹，繼續(xù)加油奧