本章动画总结
jquery的滑动
slidedown：下滑变大， slidedown([speed][fn]) ：[speed]为下滑的速度，[fn]动画完成时执行的函数 ,其中参数可选
$('p').slideDown(1000)slideUp:上滑变小 ,参数可选
$('p').slideUp(1000)slideToggle:可以上滑与下滑切换
$('p').slideToggle(1000)jquery的淡入与淡出
fadeIn：淡入效果，可以通过值的设置淡入时间
fadeOut：淡出效果，可以通过值的设置淡入时间
fadeTo：淡出到指定值，内部参数有两个必须给，分别为规定的时长和淡出透明度设置值，其中透明度设置值在0-1
<script type="text/javascript">
$(document).ready(function(){
$('.box1').hide()
$('.btn1').click(function(){
$('.box1').fadeIn(2000) })
$('.btn2').click(function(){
$('.box1').fadeOut(2000)
})
$('.btn4').click(function(){
$('.box1').fadeTo(1000,0.3)
})
})
</script>jquery的显示与隐藏
hide():用来隐藏显示的元素
书写格式：hide([speed][switch][fn]) speed为隐藏过程的速度，速度单位是毫秒；switch是切换的效果值；fn是动画完成时执行的函数
show()：用来显示隐藏的元素 书写格式：show([speed][switch][fn])
<script type="text/javascript">
$(document).ready(function(){
$('button:eq(0)').click(function(){
$('p,div').hide(1500 )
})
$('button:eq(1)').click(function(){
$('p,div').show(100 )
})
})
</script>案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery的自定义动画</title>
<style>
div{background:pink;position: absolute;}
/*当要发生发生位移时，要定义元素的位置属性*/
</style>
<script type="text/javascript" src="jquery-3.3.1.min.js">
</script>
</head>
<body>
<!-- $().stop(stopall,gotoend) :两个参数均是可选参数，stopall：规定是否应该清楚动画队列，gotoend规定是否立即完成当前动画，默认值均为false-->
<script type="text/javascript">
$(document).ready(function(){
$('button:first').click(function(){
$('div').animate({left:'+400px'},3000)
$('div').animate({fontSize:'30px'},300)
})
$('button:last').click(function(){
// $('div').stop()
// //停止当前活动的效果，但不能停止后续队列的效果，stop相等于（false,false）
// $('div').stop(true)
// 停止当前所有的动画或效果，stop相等于（true,true）
$('div').stop(false,true)
//清除后续队列并立即完成当前效果
})
})
</script>