abstract：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jq-自定义动画停止-小案例+总结</title> <style type="text/css"> #panel,#flip,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq-自定义动画停止-小案例+总结</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元素捆绑鼠标事件
$('#flip').click(function(){
// 点击后panel元素开捆绑slideDown展开/下拉事件
$('#panel').slideDown(3000)
})
// 点击slip元素捆绑鼠标事件
$('#slip').click(function(){
// 点击后panel元素开捆绑slideUp收起/上拉事件
$('#panel').slideUp(3000)
})
// 点击停止按钮触发事件
$('#stop').click(function(){
//元素panel 执行事件 stop()
$('#panel').stop()
})
})
</script>
</head>
<body>
<button id="stop">停止滑动</button>
<div id="flip">点我往下滑动面板</div>
<div id='panel'>我要自学WEB前端开发</div>
<div id="slip">点我往上滑面板</div>
</body>
</html>
Correcting teacher：灭绝师太Correction time：2018-12-01 09:24:09
Teacher's summary：总结的不错，完成的效果比较简单。现在的案例可以带上布局，刚好练习一下布局基础