jq-自定义动画停止-小案例+总结
<!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>
