サマリー：這節(jié)課只有一個知識點,結(jié)合實例練習(xí),理解起來也很容易,一般情況下用 stopAll 即可. 動畫停止函數(shù) stop()語法: $(selector).stop(stopAll,goToEnd) -stopAll: 可選屬性,屬性值有"true","false",默認是 false,即僅停止當(dāng)前發(fā)生的動畫,后面的動畫隊列
這節(jié)課只有一個知識點,結(jié)合實例練習(xí),理解起來也很容易,一般情況下用 stopAll 即可.
動畫停止函數(shù) stop()語法:
$(selector).stop(stopAll,goToEnd) -
stopAll: 可選屬性,屬性值有"true","false",默認是 false,即僅停止當(dāng)前發(fā)生的動畫,后面的動畫隊列還會繼續(xù)執(zhí)行,相反值為"true" 時,停止所有動畫. -
goToEnd: 可選屬性,屬性值有"true","false",默認是 false,沒有作用,當(dāng)值為 true 時,立即結(jié)束所有動畫,并跳到動畫最后停止的畫面.
暫停當(dāng)前動畫,后面隊列動畫繼續(xù)執(zhí)行
stop(false)
暫停所有正在動作的動畫,相當(dāng)于暫停效果
stop(true)
跳到當(dāng)前動畫的末尾,后續(xù)繼續(xù)執(zhí)行
stop(false, true)
停止所有動畫到最后畫面,相當(dāng)于瞬間完成動畫
stop(true, true)
實例練習(xí):
代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https:code.jquery.com/jquery-3.3.1.js"></script>
<style>
.in {
position: relative;
background: red;
width: 100px;
height: 100px;
}
button {
display: block;
margin: 10px auto;
}
</style>
</head>
<body>
<div></div>
<button>開始</button>
<button>暫停當(dāng)前動畫,后續(xù)繼續(xù)執(zhí)行</button>
<button>暫停所有動畫</button>
<button>跳到當(dāng)前動畫的末尾,后續(xù)繼續(xù)執(zhí)行</button>
<button>停止所有動畫到最后畫面,相當(dāng)于瞬間完成動畫</button>
<script>
$(function () {
$(".btnstart").click(function () {//隊列1動畫
$(".in").animate({
left: "100px",
}, 2000)
})
$(".btnstart").click(function () {//隊列2動畫
$(".in").animate({
borderRadius: "50%"
}, 2000)
})
$(".btnstp1").click(function () {//暫停當(dāng)前動畫,后面隊列動畫繼續(xù)執(zhí)行
$(".in").stop(false)
})
$(".btnstpall").click(function () {//暫停所有正在動作的動畫,相當(dāng)于暫停效果
$(".in").stop(true)
})
$(".btnstpend1").click(function () {//跳到當(dāng)前動畫的末尾,后續(xù)繼續(xù)執(zhí)行
$(".in").stop(false, true)
})
$(".btnstpend2").click(function () {//停止所有動畫到最后畫面,相當(dāng)于瞬間完成動畫
$(".in").stop(true, true)
})
})
</script>
</body>
</html>
添削の先生：天蓬老師添削時間：2018-12-16 12:28:33
先生のまとめ：是不是覺得, jquery中的動畫好神奇呢? 還有更多更好玩的東西,等著你去發(fā)現(xiàn)呢