abstract：jQuery 显示/隐藏：<!DOCTYPE html><html><head> <title>jQuery 显示/隐藏</title> <meta charset="utf-8"> <script src="ht
jQuery 显示/隐藏：
<!DOCTYPE html>
<html>
<head>
<title>jQuery 显示/隐藏</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
div{width: 200px;height: 200px;background:pink;margin:10px 0px;}
</style>
<script type="text/javascript">
// hide() 隐藏显示的元素
// 书写格式：hide([speed][sesing] [fn])
// show() 显示隐藏的元素
// 书写格式：show([speed][sesing] [fn])
// speed:显示过程的速度 速度是毫秒值
// sesing:指定切换的效果
// fn:动画完成时执行的一个函数
$(document).ready(function() {
$('#bt1').click(function(){
$('p').hide(1500);
});
$('#bt2').click(function(){
$('p').show(1500);
});
});
</script>
</head>
<body>
<button id="bt1">点击隐藏</button>
<button id="bt2">点击显示</button>
<!-- <div></div> -->
<p>借问江潮与海水，何似君情与妾心？</p>
<p>水晶帘动微风起，满架蔷薇一院香。</p>
</body>
</html>
演示地址 -> http://47.107.64.136/jQuery/5/1/
jQuery 滑动：
<!DOCTYPE html>
<html>
<head>
<title>jQuery 滑动</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
// jQuery的滑动是通过高度的变化（向某个方向增大或者缩小）来动态的显示所匹配的元素
// slideDown([speed])通过高度的变化，向下增大的动态效果 下滑效果
// speed:下滑显示过程的速度
// slideUp([speed]) 通过高度的变化，向上减小的动态效果 上滑效果
// speed:上滑显示过程的速度
// slideToggle([speed])通过高度的变化来切换元素的可见性
// speed:上滑隐藏/下滑显示 过程的速度
$(document).ready(function(){
$('.p1').hide();
$('.but1').click(function(){
$('.p1').slideDown(100);
});
$('.but2').click(function(){
$('.p2').slideUp();
});
$('.but3').click(function(){
$('.p3').slideToggle(1000);
});
});
</script>
</head>
<body>
<button class="but1">下滑</button>
<p class="p1">玲珑骰子安红豆，入骨相思知不知。</p>
<p class="p1">玲珑骰子安红豆，入骨相思知不知。</p>
<p class="p1">玲珑骰子安红豆，入骨相思知不知。</p>
<br>
<button class="but2">上滑</button>
<p class="p2">人生若只如初见，何事秋风悲画扇。</p>
<p class="p2">人生若只如初见，何事秋风悲画扇。</p>
<p class="p2">人生若只如初见，何事秋风悲画扇。</p>
<br>
<button class="but3">切换</button>
<p class="p3">曾经沧海难为水，除却巫山不是云。</p>
<p class="p3">曾经沧海难为水，除却巫山不是云。</p>
<p class="p3">曾经沧海难为水，除却巫山不是云。</p>
</body>
</html>
演示地址 -> http://47.107.64.136/jQuery/5/1/
jQuery 淡入淡出：
<!DOCTYPE html>
<html>
<head>
<title>jQuery 淡入淡出</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
.mian{height:240px;width: 200px;margin-right: 20px;float: left;}
.box1,.box2,.box3,.box4{height: 200px;width: 200px;background: #feff57;}
button{height: 40px;width: 200px;border:none;}
</style>
<script type="text/javascript">
// jQuery是通过控制不透明度的变化来控制匹配到的元素的淡入淡出效果
// fadeIn([speed] [fn]) 通过不透明度的变化来实现匹配到元素的淡入的效果;
// fadeOut([speed] [fn])通过不透明度的变化来实现匹配到元素的淡出的效果;
// fadeToggle([speed] [fn]) 通过不透明度的变化来开关所有匹配元素的淡入淡出效果;
// fadeTo([speed] opacity [fn]) 把所有匹配到元素的不透明度以渐进发方式调整到指定的不透明度;
// // speed:规定效果的时长
// fn:动画完成时执行是函数
// opacity：fadeTo()方法中必须参数，控制淡入淡出的效果的不透明度（值介于0与1之间）
$(document).ready(function(){
$('.box1').hide();
$('.btu1').click(function(){
$('.box1').fadeIn(3000);
});
$('.btu2').click(function(){
$('.box2').fadeOut();
});
$('.btu3').click(function(){
$('.box3').fadeToggle(1500);
});
$('.btu4').click(function(){
$('.box4').fadeTo(1000,0.3);
});
});
</script>
</head>
<body>
<div class="mian">
<button class="btu1">淡入</button>
<div class="box1"></div>
</div>
<div class="mian">
<button class="btu2">淡出</button>
<div class="box2"></div>
</div>
<div class="mian">
<button class="btu3">切换</button>
<div class="box3"></div>
</div>
<div class="mian">
<button class="btu4">淡出到指定值</button>
<div class="box4"></div>
</div>
</body>
</html>
演示地址 -> http://47.107.64.136/jQuery/5/3
jQuery 自定义动画：
<!DOCTYPE html>
<html>
<head>
<title>jQuery 自定义动画</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
div{width: 400px;height: 200px;background: #05dfff;position: absolute; color: #fff;font-size: 20px}
</style>
<script type="text/javascript">
// jQuery中我们使用 animate()方法创建自定义的动画
// 语法:$(selector).animate({params},speed,fn);
// 必需的 params 参数定义形成动画的 CSS 属性。
// 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
// 可选的 fn是动画完成后所执行的函数
// 停止动画：
// stop() 方法用于停止动画或效果，在它们完成之前； 该方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画
// 语法: $(selector).stop(stopAll,goToEnd)
// 可选的参数 stopAll 规定是否应该清除动画队列。默认是 false 仅停止活动的动画，允许任何排入队列的动画向后执行
// 可选的参数 goToEnd 规定是否立即完成当前动画。默认是 false
// 默认情况下 stop() 会清除在被选元素上指定的当前动画
$(document).ready(function(){
$('.but1').click(function(){
$('p').animate({fontSize:'40px'},1500);//属性名称font-size 一律改成驼峰写法：fontSize
});
//同时操作多个css属性
//使用预定义的值 show hide toggle
$('.but2').click(function(){
$('div').animate({
opacity:'0.3',
height:'400px',
width:'400px'
},1500)
});
$('#right').click(function(){
$('.box1').animate({left:'+500px'},3000);
$('.box1').animate({fontSize:'30px'},500);
});
$('#stop').click(function(){
$('.box1').stop(true);
});
});
</script>
</head>
<body>
<button id="right">右移</button>
<button id="stop">停止</button>
<div class="box1"> 世间无限丹青手，一片伤心画不成。</div>
</body>
</html>
演示地址 -> http://47.107.64.136/jQuery/5/4
导航栏案例练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>案例练习</title>
<link rel="icon" type="image/x-icon" href="2.png">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
.menu{
width: 1000px;height: 40px;
line-height: 40px;
margin: 20px auto;
background-color: #f5f5f5;
}
.menu li{
float: left;
text-align: center;
width: 10%;
font-weight: bold;
list-style: none;
}
a{
text-decoration:none;
color: #272525;
}
.c li{position: relative;}
.c li ul{width: 100px;box-shadow: 0 2px 5px #f5f5f5;position: absolute;}
.c li ul li{
width: 100px;
line-height: 40px;
}
.c li ul li:hover{
background-color: #f5f5f5;
}
</style>
</head>
<body>
<ul class="menu c">
<li><a href="">要闻</a></li>
<li><a href="">国际</a></li>
<li><a href="">国内</a></li>
<li><a href="">社会</a></li>
<li><a href="">军事</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">体育</a></li>
<li><a href="">汽车</a></li>
<li><a href="">科技</a></li>
<li><a href="">其他 <i class="layui-icon layui-icon-up"></i></a>
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
</ul>
</li>
</ul>
<script>
$(function () {
$('.c > li').hover(function () {
$(this).css('backgroundColor','#f5dc9c');
},
function () {
$(this).css('backgroundColor','#f5f5f5');
});
$('.c ul').hide();
$('.c > li').hover(function () {
$(this).find('ul').slideDown(300);
},
function () {
$(this).find('ul').slideUp(300);
});
});
</script>
</body>
</html>
演示地址 -> http://47.107.64.136/jQuery/5/5
Correcting teacher：韦小宝Correction time：2019-01-25 09:32:10
Teacher's summary：jQuery可以实现很多的动画特效 这些动画效果实现起来也是比较简单的 基本上都是大同小异 课后没事可以多研究研究