jq的停止动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq动画</title>
<script type="text/javascript" src="js/jq_3.3.1_mi.js"></script>
<style>
.box1{width: 200px;height: 150px;background:#0E8AF0;color: #fff;position: absolute; margin-top: 5px;}
</style>
</head>
<body>
<button id="down">下移</button>
<button id="stop">停止</button>
<div>这是box1</div>
<script type="text/javascript">
$(document).ready(function () {
$('#down').click(function(){//获取下移按钮
$('.box1').animate({top:'+200px'},1000)//box1向下移动200px，时间1000ms
$('.box1').animate({fontSize:'30px'},300)
})
$('#stop').click(function(){//获取停止按钮
$('.box1').stop(true)//使box1停止
})
})
</script>
</body>
</html>
本作业涉及的知识点：
Jq的动画效果—自定义动画
jQuery中我们使用 animate()方法创建自定义的动画
语法:$(selector).animate({params},speed,fn);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 fn是动画完成后所执行的函数
停止动画：
stop() 方法用于停止动画或效果，在它们完成之前； 该方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画
语法:
$(selector).stop(stopAll,goToEnd)
可选的参数 stopAll 规定是否应该清除动画队列。默认是 false 仅停止活动的动画，允许任何排入队列的动画向后执行
可选的参数 goToEnd 规定是否立即完成当前动画。默认是 false
默认情况下 stop() 会清除在被选元素上指定的当前动画
Jq的隐藏
Hide（）隐藏显示的元素
格式：hide([speed[] [sesing] [fn])
Speed:隐藏过程的速度，speed是毫秒值
Sesing：指定切换的效果
对于js、jq的知识点掌握仍然不好，看老师的例子能看懂，自己写出来还是不会，还得多练习