abstrakt：<!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():動(dòng)畫完成時(shí)執(zhí)行的一個(gè)函數(shù)
2. show()顯示隱藏的元素
書寫格式：show([speed][sesing][function])
speed:顯示過程的速度，速度是毫秒值
sesing:指定切換的效果
function:動(dòng)畫完成時(shí)執(zhí)行的一個(gè)函數(shù)
jQuery的滑動(dòng)
jQuery的滑動(dòng)效果是通過高度的變化(向某個(gè)方向的增大或者縮小)來動(dòng)態(tài)的匹配的元素
1. sildeDown([speed][function])通過高度的變化，來向下增大的動(dòng)態(tài)效果 下滑效果
speed:下滑顯示過程的速度 英文值或者毫秒
function():動(dòng)畫完成時(shí)執(zhí)行的函數(shù)
2. slideUp ([speed][function])通過高度的變化，來向上減小的動(dòng)態(tài)效果 上滑效果
speed:上滑顯示過程的速度 英文值或者毫秒
function():動(dòng)畫完成時(shí)執(zhí)行時(shí)的函數(shù)
3. slideToggle([speed][function()])通過高度的變化來切換元素的可見性
speed:上滑/下滑顯示 過程的速度 英文值或者毫秒
function():動(dòng)畫完成時(shí)執(zhí)行的函數(shù)
jQuery的淡入淡出
jQuery是通過控制不透明度來孔子匹配到的元素的淡入淡出效果
1.fadeIn([speed] [function])通過不透明度的變化來實(shí)現(xiàn)匹配到元素的淡入的效果
2.fadeOut([speed][function])通過不透明度的變化來實(shí)現(xiàn)匹配到元素的淡出的效果
3.fadeToggle([speed][function])通過不透明度的變化來實(shí)現(xiàn)匹配到元素的淡入淡出的效果
4.fadeTo([speed][opacity][function])把所有匹配到的元素的不透明度以漸進(jìn)方式調(diào)整到指定的值
speed：規(guī)定效果的時(shí)長
function動(dòng)畫完成時(shí)執(zhí)行的函數(shù)
opacity:是fadeTo()方法中必選參數(shù)，控制淡入淡出的效果的不透明度(值介于0~1之間)
自定義動(dòng)畫
animate()方法創(chuàng)建自定義的動(dòng)畫
語法:$(selector).animate({params},speed,function);
必選的 params 參數(shù)定義形成動(dòng)畫的 CSS 屬性。
（控制多個(gè)css屬性用逗號(hào)隔開，使用的預(yù)定義函數(shù)有show() hide() toggle() ，帶杠的屬性一律采用駝峰寫法，如果想對(duì)元素位置進(jìn)行一個(gè)位移，需要給當(dāng)前元素設(shè)置一個(gè)position）
可選的 speed 規(guī)定效果的時(shí)長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 function動(dòng)畫完成后所執(zhí)行的函數(shù)
停止動(dòng)畫：
stop() 方法用于停止動(dòng)畫或效果，在它們完成之前； 該方法適用于所有 jQuery 效果函數(shù)，包括滑動(dòng)、淡入淡出和自定義動(dòng)畫
語法: $(selector).stop(stopAll,goToEnd)
可選的參數(shù) stopAll 規(guī)定是否應(yīng)該清除動(dòng)畫隊(duì)列。默認(rèn)是 false 僅停止活動(dòng)的動(dòng)畫，允許任何排入隊(duì)列的動(dòng)畫向后執(zhí)行
可選的參數(shù) goToEnd 規(guī)定是否立即完成當(dāng)前動(dòng)畫。默認(rèn)是 false
默認(rèn)情況下 stop() 會(huì)清除在被選元素上指定的當(dāng)前動(dòng)畫
Korrigierender Lehrer：天蓬老師Korrekturzeit：2018-12-12 22:45:08
Zusammenfassung des Lehrers：很多框架和庫,都提供有基本的動(dòng)畫功能 ,但是jQuery是最簡單的, 也很強(qiáng)大