abstrakt：總結(jié)： 1. 本章jquery動畫總結(jié)。 2. 帶jquery動畫的導(dǎo)航條<!doctype html><html><head><meta charset="UTF-8"><title>jquery的動畫效果筆記</title><link rel=&
總結(jié)： 1. 本章jquery動畫總結(jié)。 2. 帶jquery動畫的導(dǎo)航條
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery的動畫效果筆記</title>
<link rel="icon" type="image/x-icon" href="">
<link rel="stylesheet" href="">
<script src="jquery/jquery-3.3.1.min.js"></script>
<style>
.box1,.p1,.box2{width: 200px;height: 100px;background: red;}
.box3{width: 200px;height: 100px;background: red;position: absolute;}
</style>
</head>
<body>
<script>
// jquery的動畫效果筆記
// 1. 顯示與隱藏
// hide([speed] [sesing] [fn]) 隱藏
// show([speed] [sesing] [fn]) 顯示
// speed：顯示或隱藏過程的速度
// sesing：指定的切換效果
// fn：動畫完成時(shí)執(zhí)行的一個(gè)函數(shù)
$(document).ready(function(){
$(".bt1").click(function(){
$(".box1").hide(2000);
})
$(".bt2").click(function(){
$(".box1").show(2000);
})
})
// 2. 滑動
// slideDown([speed] [fn])通過高度的變化，向下增大的動態(tài)效果，即下滑效果
// 其中：speed：下滑顯示的速度，英文slow、fast或毫秒
// fn：動畫完成時(shí)執(zhí)行的函數(shù)
// slideUp([speed] [fn])通過高度的變化，向上減小的動態(tài)效果，即上滑效果
// 其中：speed：下滑顯示的速度，英文slow、fast或毫秒
// fn：動畫完成時(shí)執(zhí)行的函數(shù)
// slideToggle([speed] [fn])通過高度的變化來切換元素的可見性
// 其中：speed：上滑隱藏/下滑顯示的速度，英文slow、fast或毫秒
// fn：動畫完成時(shí)執(zhí)行的函數(shù)
$(document).ready(function(){
$(".bt3").click(function(){
$(".p1").slideDown(2000);
})
$(".bt4").click(function(){
$(".p1").slideUp(2000);
})
$(".bt5").click(function(){
$(".p1").slideToggle(2000);
})
})
// 3. 淡入淡出
// fadeIn([speed] [fn]) 通過不透明度變化來實(shí)現(xiàn)匹配元素的淡入效果
// fadeOut([speed] [fn]) 通過不透明度變化來實(shí)現(xiàn)匹配元素的淡出效果
// fadeToggle([speed] [fn]) 通過不透明度變化來開關(guān)所有匹配到元素的淡入淡出效果
// fadeTo([speed] opacity [fn]) 把所有匹配到元素的不透明度以漸進(jìn)方式調(diào)整到指定地點(diǎn)不透明度
// opacity：必選參數(shù)，控制淡入淡出效果達(dá)到的不透明度，值介于0到1之間
$(document).ready(function(){
$(".bt6").click(function(){
$(".box2").fadeIn(2000);
})
$(".bt7").click(function(){
$(".box2").fadeOut(2000);
})
$(".bt8").click(function(){
$(".box2").fadeToggle(2000);
})
$(".bt9").click(function(){
$(".box2").fadeTo(2000,0.3);
})
})
// 4. 自定義動畫
// 語法：$(selector).animate({params},speed,fn);
// params:必選參數(shù)，定義形成動畫的css屬性
// speed：可選，效果的時(shí)長。slow、fast或毫秒
// fn：動畫完成時(shí)所執(zhí)行的函數(shù)
// 語法：$(selector).stop(stopAll,goToEnd)
// stopAll：可選，規(guī)定是否應(yīng)該清除動畫隊(duì)列。默認(rèn)false，僅停止活動的動畫，允許其它排入隊(duì)列的動畫執(zhí)行
// goToEnd：規(guī)定是否立即完成當(dāng)前動畫。默認(rèn)是false?？蛇x。
// 默認(rèn)情況下，stop()會清除在被選元素上指定的動畫
$(document).ready(function(){
$(".bt10").click(function(){
$(".box3").animate(
{left:"400px",
opacity:"0.3",
height:"400px",
width:"400px",
},2000);
})
$(".bt11").click(function(){
$(".box3").animate(
{width:"toggle",
//height:"toggle",
},2000);
})
$(".bt12").click(function(){
$(".box3").stop();
})
})
</script>
<div>顯示與隱藏測試</div>
<button>點(diǎn)擊實(shí)現(xiàn)隱藏</button>
<button> 點(diǎn)擊實(shí)現(xiàn)顯示</button><hr>
<p>goToEnd：規(guī)定是否立即完成當(dāng)前動畫。默認(rèn)是false?？蛇x。
// 默認(rèn)情況下，stop()會清除在被選元素上指定的動畫</p>
<button> 點(diǎn)擊向上減小</button>
<button> 點(diǎn)擊向下增大</button>
<button> 點(diǎn)擊實(shí)現(xiàn)向上減小和向上增大的切換效果</button><hr>
<div>淡入淡出效果</div>
<button> 點(diǎn)擊淡入</button>
<button> 點(diǎn)擊淡出</button>
<button> 點(diǎn)擊實(shí)現(xiàn)淡入淡出切換效果</button>
<button> 點(diǎn)擊改變不透明度</button><hr>
<button> 點(diǎn)擊開始自定義動畫</button>
<button> 點(diǎn)擊寬度方向隱藏切換</button>
<button> 點(diǎn)擊停止</button>
<div>自定義動畫</div>
</body>
</html>
第二個(gè)作業(yè)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>用jquery制作動畫導(dǎo)航</title>
<link rel="icon" type="image/x-icon" href=""> <!-- title左邊的小圖標(biāo) -->
<link rel="stylesheet" href=""> <!-- 導(dǎo)入外部css -->
<script src="jquery/jquery-3.3.1.min.js"></script>
<style>
*{margin: 0;padding: 0;}
.navigator{width: 1450px;height: 50px;background: #000;margin: 0 auto;line-height: 50px;}
.left{float: left;margin-left: 30px;}
.right{float: right;margin-right: 50px;}
.clear{clear: both;}
a{text-decoration: none;color:green;padding: 10px;}
.a1{position:relative;}
ul{list-style: none;position: absolute;}
li{display: none;width: 96px;text-align: center;}
</style>
<script>
$(document).ready(function(){
$(".a1").mouseenter(function(){
$(".a1:hover li").css({"display":"block","background":"#ccc","border":"1px solid #ddd"});
})
$(".a1").mouseleave(function(){
$("li").css("display","none");
})
})
</script>
</head>
<body>
<div>
<div>
<a href="">網(wǎng)站鏈接
<ul>
<li>百度網(wǎng)站</li>
<li>新浪網(wǎng)站</li>
<li>PHP網(wǎng)站</li>
</ul>
</a>
<a href="">PHP學(xué)習(xí)
<ul>
<li>PHP下載</li>
<li>環(huán)境配置</li>
<li>PHP編程技巧</li>
</ul>
</a>
<a href="">MySQL學(xué)習(xí)</a>
<a href="">HTML學(xué)習(xí)</a>
</div>
<div>
<a href="">資料下載
<ul>
<li>web前端資料</li>
<li>后臺資料</li>
<li>數(shù)據(jù)庫資料</li>
</ul>
</a>
<a href="">學(xué)習(xí)教程
<ul>
<li>HTML語言</li>
<li>JavaScript</li>
<li>PHP腳本語言</li>
<li>C++語言</li>
</ul>
</a>
<a href="">聯(lián)系我們</a>
</div>
</div>
<div></div>
</body>
</html>
Korrigierender Lehrer：查無此人Korrekturzeit：2019-03-25 09:23:21
Zusammenfassung des Lehrers：完成的不錯(cuò)，這章學(xué)習(xí)了很多呀。繼續(xù)加油。