abstrakt：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jq-自定義動畫停止-小案例+總結(jié)</title> <style type="text/css"> #panel,#flip,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq-自定義動畫停止-小案例+總結(jié)</title>
<style type="text/css">
#panel,#flip,#slip{padding: 5px;text-align: center;border:1px solid #c3c3c3;}
#panel{padding: 50px; display: none;}
</style>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script>
$(function(){
// 點擊下滑需要獲取flip元素捆綁鼠標(biāo)事件
$('#flip').click(function(){
// 點擊后panel元素開捆綁slideDown展開/下拉事件
$('#panel').slideDown(3000)
})
// 點擊slip元素捆綁鼠標(biāo)事件
$('#slip').click(function(){
// 點擊后panel元素開捆綁slideUp收起/上拉事件
$('#panel').slideUp(3000)
})
// 點擊停止按鈕觸發(fā)事件
$('#stop').click(function(){
//元素panel 執(zhí)行事件 stop()
$('#panel').stop()
})
})
</script>
</head>
<body>
<button id="stop">停止滑動</button>
<div id="flip">點我往下滑動面板</div>
<div id='panel'>我要自學(xué)WEB前端開發(fā)</div>
<div id="slip">點我往上滑面板</div>
</body>
</html>
Korrigierender Lehrer：滅絕師太Korrekturzeit：2018-12-01 09:24:09
Zusammenfassung des Lehrers：總結(jié)的不錯，完成的效果比較簡單?，F(xiàn)在的案例可以帶上布局，剛好練習(xí)一下布局基礎(chǔ)