サマリー：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="/static/jQuery/jquery-3.3.1.min.js"></scr
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="/static/jQuery/jquery-3.3.1.min.js"></script>
<title>Document</title>
<style>
*{padding: 0; margin: 0;}
.box{ width: 750px; height: 40px; background: tan; border-radius: 10px; margin: 0 ; color:navy;}
li{list-style: none; font-size: 20px;}
ul li{width: 120px; height: 35px; background:tan; float: left; border-right:1px solid #CCC; text-align: center; line-height: 35px;}
.box2_a li{width: 110px; height: 30px; background:darkgoldenrod; position: relative; }
.box2_b li{width: 110px; height: 30px; background:darkgoldenrod; position: relative; }
.box2_a li:hover {background:darksalmon;color: red;}
.box2_b li:hover {background: darksalmon;color: red;}
.box3_a{position: absolute; top: 0px; left:100px;}
.box3_b{position: absolute; top: 0px; left:100px;}
.box3_a li{text-align: center; }
.box3_b li{text-align: center; }
.foot{width: 750px; height: 500px; border: 1px solid red; margin-top:10px; padding: 10px;}
.foot1{width: 150px; height: 150px; background: red; margin-top: 5px; position: absolute; }
button{padding: 2px 5px;}
td{padding: 10px;}
</style>
</head>
<body>
<script>
$(document).ready(function(){
//動畫效果導(dǎo)航部分
$('.box2_a,.box2_b').hide()
$('.box3_a,.box3_b').hide()
$('.d1_a').mousemove(function(){
$('.box2_a').slideDown(500)
})
$('.d1_b').mousemove(function(){
$('.box2_b').slideDown(500)
})
$('.d1_a').mouseleave(function(){
$('.box2_a').hide()
})
$('.d1_b').mouseleave(function(){
$('.box2_b').hide()
})
$('.d2_a').mousemove(function(){
$('.box3_a').slideDown(100)
})
$('.d2_b').mousemove(function(){
$('.box3_b').slideDown(100)
})
$('.d2_a').mouseleave(function(){
$('.box3_a').hide()
})
$('.d2_b').mouseleave(function(){
$('.box3_b').hide()
})
//動畫效果部分
$('.bt1').click(function(){
$('.foot1').hide(1000) //hide() 隱藏顯示的元素
})
$('.bt2').click(function(){
$('.foot1').show(1000) //show() 顯示隱藏的元素
})
$('.bt3').hover(function(){ //使用hover切換顯示和隱藏
$('.foot1').hide(1000)
},
function(){
$('.foot1').show(1000)
}
)
$('.bt4').click(function(){
$('.foot1').slideUp() //slideUp()上滑效果
})
$('.bt5').click(function(){
$('.foot1').slideDown(1000) //slideDown()下滑效果 時(shí)長1000毫秒
})
$('.bt6').click(function(){
$('.foot1').slideToggle(500) //上滑和下滑效果切換 時(shí)長500毫秒
})
$('.bt7').click(function(){
$('.foot1').fadeOut(1000) //fadeOut（）淡出效果
})
$('.bt8').click(function(){
$('.foot1').fadeIn(1000) //fadeIn(1000) 淡入效果 時(shí)長1000毫秒
})
$('.bt9').click(function(){
$('.foot1').fadeToggle(1000) //fadeToggle(1000) 淡出和淡入切換
})
$('.bt10').click(function(){
$('.foot1').fadeTo(1000,0.2) //淡出到指定值，值是0-1之間 0就是空，1就是原色
})
$('.bt11').click(function(){
$('.foot1').animate({ //使用animate 不能使用背景色和前景色
left:'400px',
top:'260px',
width:'300px',
height:'300px',
fontSize:'60px',
fontWeight:'bold',
opacity:'0.3' //淡出到的指定值（0-1）
},1500)
})
$('.bt12').click(function(){ //點(diǎn)擊事件
$('.foot1').stop(true) //停止事件
})
$('.bt13').click(function(){ //點(diǎn)擊事件
$('.foot1').stop(true,true) //兩個(gè)true就是快速完成
})
})
</script>
<div class="box">
<ul class="box1">
<li class="d1_a">學(xué)習(xí)課程
<ul class="box2_a">
<li class="d2_a">html
<ul class="box3_a">
<li>p標(biāo)簽</li>
<li>a標(biāo)簽</li>
<li>ul標(biāo)簽</li>
</ul>
</li>
<li>css</li>
<li>js</li>
</ul>
</li>
<li class="d1_b">網(wǎng)站
<ul class="box2_b">
<li class="d2_b">中文網(wǎng)
<ul class="box3_b">
<li>PHP</li>
<li>百度</li>
<li>谷歌</li>
</ul>
</li>
<li>英文</li>
<li>俄文</li>
</ul>
</li>
<li>會員中心</li>
<li>財(cái)務(wù)中心</li>
<li>公司動態(tài)</li>
<li>聯(lián)系我們</li>
</ul>
</div>
<div class="foot">
<button class="bt1">隱藏</button>
<button class="bt2">顯示</button>
<button class="bt3">隱藏和顯示</button>
<button class="bt4">上滑動</button>
<button class="bt5">下滑動</button>
<button class="bt6">切換滑動</button>
<button class="bt7">淡出</button>
<button class="bt8">淡入</button>
<button class="bt9">淡出/淡入</button>
<button class="bt10">淡出到指定值</button>
<br>
<button class="bt11">自定義動畫向右向下</button>
<button class="bt12">停止</button>
<button class="bt13">停止動畫快速完成</button>
<div class="foot1">您好</div>
</div>
<div>
<!--jquery動畫章節(jié)筆記總結(jié)-->
<table border="1" style="font-size:20px;">
<caption ><h3>jquery動畫效果顯示和隱藏</h3></caption>
<tr >
<th>動畫事件</th>
<th>動畫語法</th>
<th>動畫案例</th>
<th>案例說明</th>
</tr>
<tr>
<td>hide()隱藏顯示的元素</td>
<td>hide([speed][sesing] [fn])
<br><br>
speed:隱藏過程的速度 速度是毫秒值<br>
sesing:指定切換的效果<br>
fn:動畫完成時(shí)執(zhí)行的一個(gè)函數(shù)
</td>
<td>$('.box2_a,.box2_b').hide()</td>
<td>隱藏 .box2_a,.box2_b類元素</td>
</tr>
<tr>
<td>show()顯示隱藏的元素</td>
<td>show([speed][sesing] [fn]) <br><br>
speed:顯示過程的速度 速度是毫秒值<br>
sesing:指定切換的效果<br>
fn:動畫完成時(shí)執(zhí)行的一個(gè)函數(shù)
</td>
<td>$('.box2_a,.box2_b').show()</td>
<td>顯示.box2_a,.box2_b類元素，前提是先隱藏</td>
</tr>
<tr>
<td>slideDown()下滑動</td>
<td>slideDown([滑動速度毫秒數(shù)][切換效果] [函數(shù)])
<br>
通過高度的變化，向下增大的動態(tài)效果 下滑效果
</td>
<td>$('.p1').slideDown(1000) </td>
<td>類選擇器p1 下滑動效果 時(shí)長1000毫秒</td>
</tr>
<tr>
<td>slideUp（）上滑動</td>
<td>slideUp([speed][sesing] [fn])
<br>
通過高度的變化，向上減小的動態(tài)效果 上滑效果
</td>
<td>$('.p2').slideUp(1000)</td>
<td>類選擇器p2 上滑動效果 時(shí)長1000毫秒</td>
</tr>
<tr>
<td>slideToggle（）上滑動/下滑動切換</td>
<td>slideToggle([speed] [fn])
<br>
通過高度的變化來切換元素的可見性
</td>
<td>$('.p3').slideToggle(1000)</td>
<td>類選擇器P3 上滑動和下滑動切換動畫</td>
</tr>
<tr>
<td>fadeIn（）淡入動畫</td>
<td>fadeIn([speed] [fn])
<br>
通過不透明度的變化來實(shí)現(xiàn)匹配到元素的淡入的效果;
</td>
<td>$('.box1').fadeIn(1000)</td>
<td>類選擇器box1 淡入動畫效果 時(shí)長1000毫秒</td>
</tr>
<tr>
<td>fadeOut（）淡出動畫</td>
<td>fadeOut([speed] [fn])
<br>
通過不透明度的變化來實(shí)現(xiàn)匹配到元素的淡出的效果;
</td>
<td>$('.box2').fadeOut(1000)</td>
<td>類選擇器box2 淡出動畫效果 時(shí)長1000毫秒</td>
</tr>
<tr>
<td>fadeToggle（）淡入/淡出切換</td>
<td>
fadeToggle([speed] [fn])
<br>
通過不透明度的變化來開關(guān)所有匹配元素的淡入淡出效果;
</td>
<td>$('.box3').fadeToggle(1000) </td>
<td>對類選擇器box 進(jìn)行淡出淡入切換動畫</td>
</tr>
<tr>
<td>fadeTo（）淡出到指定的值</td>
<td style="width:600px">
fadeTo([speed] opacity [fn])
<br>把所有匹配到元素的不透明度以漸進(jìn)發(fā)方式調(diào)整到指定的不透明度;
speed:規(guī)定效果的時(shí)長<br>
fn:動畫完成時(shí)執(zhí)行是函數(shù)<br>
opacity：fadeTo()方法中必須參數(shù)，控制淡入淡出的效果的不透明度（值介于0與1之間）
</td>
<td>$('.box4').fadeTo(1000, 0.2)</td>
<td>box4類選擇器 時(shí)長1000毫秒內(nèi)淡出到0.2的透明度<br>
數(shù)值1即沒效果，0則全部淡出
</td>
</tr>
<tr>
<td>animate()方法創(chuàng)建自定義的動畫</td>
<td>:$(selector).animate({params},speed,fn);
<br>
必需的 params 參數(shù)定義形成動畫的 CSS 屬性。<br>
可選的 speed 參數(shù)規(guī)定效果的時(shí)長。它可以取以下值："slow"、"fast" 或毫秒。<br>
可選的 fn是動畫完成后所執(zhí)行的函數(shù)
</td>
<td>單個(gè)操作css屬性 <br>
$('p').animate({fontSize:'40px'},1500)
<br>
時(shí)長1500毫秒內(nèi)選擇器p內(nèi)的字體放大到40px；
</td>
<td>同時(shí)操作多個(gè)css屬性<br>
$('div').animate({ <br>
left:'400px', <br>
opacity:'0.3', <br>
height:'400px', <br>
width:'400px' <br>
width:'toggle' <br>
},1500)
<br>
說明：如想對元素位置進(jìn)行位移，必須使用絕對定位position：absolute；<br>
這樣left:'400px'就可以向右移動400px; <br>
同時(shí)自定義動畫也可以使用預(yù)定義的值 show hide toggle <br>
如：width:'toggle'
</td>
</tr>
<tr>
<td> stop()停止動畫效果</td>
<td>stop() 方法用于停止動畫或效果，在它們完成之前； 該方法適用于所有 jQuery 效果函數(shù)，
包括滑動、淡入淡出和自定義動畫 <br><br>
語法:$(selector).stop(stopAll,goToEnd) <br><br>
可選的參數(shù) stopAll 規(guī)定是否應(yīng)該清除動畫隊(duì)列。默認(rèn)是 false 僅停止活動的動畫，允許任何排入隊(duì)列的動畫向后執(zhí)行<br>
可選的參數(shù) goToEnd 規(guī)定是否立即完成當(dāng)前動畫。默認(rèn)是 false <br>
默認(rèn)情況下 stop() 會清除在被選元素上指定的當(dāng)前動畫
</td>
<td> $('#right').click(function(){ //獲取向右ID 點(diǎn)擊事件 <br>
$('.box1').animate({left:'+500px'},3000) //事件流1<br>
$('.box1').animate({fontSize:'30px'},500) //事件流2<br>
}) <br><br>
$('#stop').click(function(){ //點(diǎn)擊事件<br>
$('.box1').stop(true) //停止事件<br>
$('.box1').stop(true,true) //兩個(gè)true就是快速完成<br>
})
</td>
<td>停止動畫可以對事件流進(jìn)行停止，一個(gè)true是停止動畫，兩個(gè)true就是快速完成動畫</td>
</tr>
</div>
</body>
</html>
添削の先生：天蓬老師添削時(shí)間：2019-02-11 13:03:28
先生のまとめ：運(yùn)動和停止, 過度, 元素隱藏與顯示,是最常用的動畫樣式,要多練習(xí)