abstract:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jq动画</title><script type="text/javascript" src="js/jq_3.3.1_mi.js"></
<!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的知识点掌握仍然不好,看老师的例子能看懂,自己写出来还是不会,还得多练习
Correcting teacher:天蓬老师Correction time:2019-02-11 11:33:27
Teacher's summary:对于动画函数来说, 参数类型要注意, 必须是对象字面量, 还有从多的参数, 也是需要记忆的