摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> &
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>案例</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
div{margin-top: 100px;margin-left: 500px;color: #FF9800;font-size: 20px;}
input{margin-top:40px;margin-left:20px;border:1px solid pink;width: 300px;height:30px;position: relative;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#in1').focus(function(){
$('#in1').animate({
width:'350px',
height:'40px'
})
})
$('#in1').blur(function(){
$('#in1').animate({
width:'300px',
height:'30px'
})
})
$('#in2').focus(function(){
$('#in2').animate({
width:'350px',
height:'40px'
})
})
$('#in2').blur(function(){
$('#in2').animate({
width:'300px',
height:'30px'
})
})
})
</script>
</head>
<body>
<div>
用户名：<input type="" placeholder="请输入用户名" id="in1"><br>
密 码：<input type="text" placeholder="请输入密码" id="in2">
</div>
</body>
</html>jQuery的显示/隐藏
1. hide(）隐藏显示的元素
书写格式：hide([speed][sesing][function])
speed:隐藏过程的速度，速度是毫秒值
sesing:指定切换的效果
function():动画完成时执行的一个函数
2. show()显示隐藏的元素
书写格式：show([speed][sesing][function])
speed:显示过程的速度，速度是毫秒值
sesing:指定切换的效果
function:动画完成时执行的一个函数
jQuery的滑动
jQuery的滑动效果是通过高度的变化(向某个方向的增大或者缩小)来动态的匹配的元素
1. sildeDown([speed][function])通过高度的变化，来向下增大的动态效果 下滑效果
speed:下滑显示过程的速度 英文值或者毫秒
function():动画完成时执行的函数
2. slideUp ([speed][function])通过高度的变化，来向上减小的动态效果 上滑效果
speed:上滑显示过程的速度 英文值或者毫秒
function():动画完成时执行时的函数
3. slideToggle([speed][function()])通过高度的变化来切换元素的可见性
speed:上滑/下滑显示 过程的速度 英文值或者毫秒
function():动画完成时执行的函数
jQuery的淡入淡出
jQuery是通过控制不透明度来孔子匹配到的元素的淡入淡出效果
1.fadeIn([speed] [function])通过不透明度的变化来实现匹配到元素的淡入的效果
2.fadeOut([speed][function])通过不透明度的变化来实现匹配到元素的淡出的效果
3.fadeToggle([speed][function])通过不透明度的变化来实现匹配到元素的淡入淡出的效果
4.fadeTo([speed][opacity][function])把所有匹配到的元素的不透明度以渐进方式调整到指定的值
speed：规定效果的时长
function动画完成时执行的函数
opacity:是fadeTo()方法中必选参数，控制淡入淡出的效果的不透明度(值介于0~1之间)
自定义动画
animate()方法创建自定义的动画
语法:$(selector).animate({params},speed,function);
必选的 params 参数定义形成动画的 CSS 属性。
（控制多个css属性用逗号隔开，使用的预定义函数有show() hide() toggle() ，带杠的属性一律采用驼峰写法，如果想对元素位置进行一个位移，需要给当前元素设置一个position）
可选的 speed 规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 function动画完成后所执行的函数
停止动画：
stop() 方法用于停止动画或效果，在它们完成之前； 该方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画
语法: $(selector).stop(stopAll,goToEnd)
可选的参数 stopAll 规定是否应该清除动画队列。默认是 false 仅停止活动的动画，允许任何排入队列的动画向后执行
可选的参数 goToEnd 规定是否立即完成当前动画。默认是 false
默认情况下 stop() 会清除在被选元素上指定的当前动画
批改老师：天蓬老师批改时间：2018-12-12 22:45:08
老师总结：很多框架和库,都提供有基本的动画功能 ,但是jQuery是最简单的, 也很强大
