abstract：总结： 1. 本章jquery动画总结。 2. 带jquery动画的导航条<!doctype html><html><head><meta charset="UTF-8"><title>jquery的动画效果笔记</title><link rel=&
总结： 1. 本章jquery动画总结。 2. 带jquery动画的导航条
<!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：动画完成时执行的一个函数
$(document).ready(function(){
$(".bt1").click(function(){
$(".box1").hide(2000);
})
$(".bt2").click(function(){
$(".box1").show(2000);
})
})
// 2. 滑动
// slideDown([speed] [fn])通过高度的变化，向下增大的动态效果，即下滑效果
// 其中：speed：下滑显示的速度，英文slow、fast或毫秒
// fn：动画完成时执行的函数
// slideUp([speed] [fn])通过高度的变化，向上减小的动态效果，即上滑效果
// 其中：speed：下滑显示的速度，英文slow、fast或毫秒
// fn：动画完成时执行的函数
// slideToggle([speed] [fn])通过高度的变化来切换元素的可见性
// 其中：speed：上滑隐藏/下滑显示的速度，英文slow、fast或毫秒
// fn：动画完成时执行的函数
$(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]) 通过不透明度变化来实现匹配元素的淡入效果
// fadeOut([speed] [fn]) 通过不透明度变化来实现匹配元素的淡出效果
// fadeToggle([speed] [fn]) 通过不透明度变化来开关所有匹配到元素的淡入淡出效果
// fadeTo([speed] opacity [fn]) 把所有匹配到元素的不透明度以渐进方式调整到指定地点不透明度
// opacity：必选参数，控制淡入淡出效果达到的不透明度，值介于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:必选参数，定义形成动画的css属性
// speed：可选，效果的时长。slow、fast或毫秒
// fn：动画完成时所执行的函数
// 语法：$(selector).stop(stopAll,goToEnd)
// stopAll：可选，规定是否应该清除动画队列。默认false，仅停止活动的动画，允许其它排入队列的动画执行
// goToEnd：规定是否立即完成当前动画。默认是false。可选。
// 默认情况下，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>点击实现隐藏</button>
<button> 点击实现显示</button><hr>
<p>goToEnd：规定是否立即完成当前动画。默认是false。可选。
// 默认情况下，stop()会清除在被选元素上指定的动画</p>
<button> 点击向上减小</button>
<button> 点击向下增大</button>
<button> 点击实现向上减小和向上增大的切换效果</button><hr>
<div>淡入淡出效果</div>
<button> 点击淡入</button>
<button> 点击淡出</button>
<button> 点击实现淡入淡出切换效果</button>
<button> 点击改变不透明度</button><hr>
<button> 点击开始自定义动画</button>
<button> 点击宽度方向隐藏切换</button>
<button> 点击停止</button>
<div>自定义动画</div>
</body>
</html>
第二个作业
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>用jquery制作动画导航</title>
<link rel="icon" type="image/x-icon" href=""> <!-- title左边的小图标 -->
<link rel="stylesheet" href=""> <!-- 导入外部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="">网站链接
<ul>
<li>百度网站</li>
<li>新浪网站</li>
<li>PHP网站</li>
</ul>
</a>
<a href="">PHP学习
<ul>
<li>PHP下载</li>
<li>环境配置</li>
<li>PHP编程技巧</li>
</ul>
</a>
<a href="">MySQL学习</a>
<a href="">HTML学习</a>
</div>
<div>
<a href="">资料下载
<ul>
<li>web前端资料</li>
<li>后台资料</li>
<li>数据库资料</li>
</ul>
</a>
<a href="">学习教程
<ul>
<li>HTML语言</li>
<li>JavaScript</li>
<li>PHP脚本语言</li>
<li>C++语言</li>
</ul>
</a>
<a href="">联系我们</a>
</div>
</div>
<div></div>
</body>
</html>
Correcting teacher：查无此人Correction time：2019-03-25 09:23:21
Teacher's summary：完成的不错，这章学习了很多呀。继续加油。