????：這節(jié)課只有一個(gè)知識(shí)點(diǎn),結(jié)合實(shí)例練習(xí),理解起來(lái)也很容易,一般情況下用 stopAll 即可. 動(dòng)畫(huà)停止函數(shù) stop()語(yǔ)法: $(selector).stop(stopAll,goToEnd) -stopAll: 可選屬性,屬性值有"true","false",默認(rèn)是 false,即僅停止當(dāng)前發(fā)生的動(dòng)畫(huà),后面的動(dòng)畫(huà)隊(duì)列
這節(jié)課只有一個(gè)知識(shí)點(diǎn),結(jié)合實(shí)例練習(xí),理解起來(lái)也很容易,一般情況下用 stopAll 即可.
動(dòng)畫(huà)停止函數(shù) stop()語(yǔ)法:
$(selector).stop(stopAll,goToEnd) -
stopAll: 可選屬性,屬性值有"true","false",默認(rèn)是 false,即僅停止當(dāng)前發(fā)生的動(dòng)畫(huà),后面的動(dòng)畫(huà)隊(duì)列還會(huì)繼續(xù)執(zhí)行,相反值為"true" 時(shí),停止所有動(dòng)畫(huà). -
goToEnd: 可選屬性,屬性值有"true","false",默認(rèn)是 false,沒(méi)有作用,當(dāng)值為 true 時(shí),立即結(jié)束所有動(dòng)畫(huà),并跳到動(dòng)畫(huà)最后停止的畫(huà)面.
暫停當(dāng)前動(dòng)畫(huà),后面隊(duì)列動(dòng)畫(huà)繼續(xù)執(zhí)行
stop(false)
暫停所有正在動(dòng)作的動(dòng)畫(huà),相當(dāng)于暫停效果
stop(true)
跳到當(dāng)前動(dòng)畫(huà)的末尾,后續(xù)繼續(xù)執(zhí)行
stop(false, true)
停止所有動(dòng)畫(huà)到最后畫(huà)面,相當(dāng)于瞬間完成動(dòng)畫(huà)
stop(true, true)
實(shí)例練習(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>開(kāi)始</button>
<button>暫停當(dāng)前動(dòng)畫(huà),后續(xù)繼續(xù)執(zhí)行</button>
<button>暫停所有動(dòng)畫(huà)</button>
<button>跳到當(dāng)前動(dòng)畫(huà)的末尾,后續(xù)繼續(xù)執(zhí)行</button>
<button>停止所有動(dòng)畫(huà)到最后畫(huà)面,相當(dāng)于瞬間完成動(dòng)畫(huà)</button>
<script>
$(function () {
$(".btnstart").click(function () {//隊(duì)列1動(dòng)畫(huà)
$(".in").animate({
left: "100px",
}, 2000)
})
$(".btnstart").click(function () {//隊(duì)列2動(dòng)畫(huà)
$(".in").animate({
borderRadius: "50%"
}, 2000)
})
$(".btnstp1").click(function () {//暫停當(dāng)前動(dòng)畫(huà),后面隊(duì)列動(dòng)畫(huà)繼續(xù)執(zhí)行
$(".in").stop(false)
})
$(".btnstpall").click(function () {//暫停所有正在動(dòng)作的動(dòng)畫(huà),相當(dāng)于暫停效果
$(".in").stop(true)
})
$(".btnstpend1").click(function () {//跳到當(dāng)前動(dòng)畫(huà)的末尾,后續(xù)繼續(xù)執(zhí)行
$(".in").stop(false, true)
})
$(".btnstpend2").click(function () {//停止所有動(dòng)畫(huà)到最后畫(huà)面,相當(dāng)于瞬間完成動(dòng)畫(huà)
$(".in").stop(true, true)
})
})
</script>
</body>
</html>
?? ???：天蓬老師?? ??：2018-12-16 12:28:33
???? ??：是不是覺(jué)得, jquery中的動(dòng)畫(huà)好神奇呢? 還有更多更好玩的東西,等著你去發(fā)現(xiàn)呢