摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jq自定义停止事件</title> <!-- 引入jq --> <script src=".
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq自定义停止事件</title>
<!-- 引入jq -->
<script src="../jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div{
background: #999;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div class="box">点击停止按钮</div>
<input type="button" onclick="Drow()" value="开始">
<input type="button" onclick="Stop()" value="停止当前">
<input type="button" onclick="AllStop()" value="停止所有">
<!-- js -->
<script type="text/javascript">
// 动画开始的时候
function Drow(){
$('.box').animate({
'width':'500px',
'font-size':'30px'
},1500)
$('.box').animate({'height':'200px'},1500)
}
// 动画停止
function Stop(){
//第一个参数 true 表示停止停止所有的动画效果,false表示停止当前动画,下面的动画可以继续执行
//后面加个true参数表示快速执行
$('.box').stop(false,true)
}
// 停止所有
function AllStop(){
$('.box').stop(true)
}
</script>
</body>
</html>
批改老师:韦小宝批改时间:2018-11-15 09:08:30
老师总结:嗯!不错!代码很完整!写的也很规范!缺少总结!下次记得带上哦!!