摘要：<!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(){
//动画效果导航部分
$('.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()下滑效果 时长1000毫秒
})
$('.bt6').click(function(){
$('.foot1').slideToggle(500) //上滑和下滑效果切换 时长500毫秒
})
$('.bt7').click(function(){
$('.foot1').fadeOut(1000) //fadeOut（）淡出效果
})
$('.bt8').click(function(){
$('.foot1').fadeIn(1000) //fadeIn(1000) 淡入效果 时长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(){ //点击事件
$('.foot1').stop(true) //停止事件
})
$('.bt13').click(function(){ //点击事件
$('.foot1').stop(true,true) //两个true就是快速完成
})
})
</script>
<div class="box">
<ul class="box1">
<li class="d1_a">学习课程
<ul class="box2_a">
<li class="d2_a">html
<ul class="box3_a">
<li>p标签</li>
<li>a标签</li>
<li>ul标签</li>
</ul>
</li>
<li>css</li>
<li>js</li>
</ul>
</li>
<li class="d1_b">网站
<ul class="box2_b">
<li class="d2_b">中文网
<ul class="box3_b">
<li>PHP</li>
<li>百度</li>
<li>谷歌</li>
</ul>
</li>
<li>英文</li>
<li>俄文</li>
</ul>
</li>
<li>会员中心</li>
<li>财务中心</li>
<li>公司动态</li>
<li>联系我们</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动画章节笔记总结-->
<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:动画完成时执行的一个函数
</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:动画完成时执行的一个函数
</td>
<td>$('.box2_a,.box2_b').show()</td>
<td>显示.box2_a,.box2_b类元素，前提是先隐藏</td>
</tr>
<tr>
<td>slideDown()下滑动</td>
<td>slideDown([滑动速度毫秒数][切换效果] [函数])
<br>
通过高度的变化，向下增大的动态效果 下滑效果
</td>
<td>$('.p1').slideDown(1000) </td>
<td>类选择器p1 下滑动效果 时长1000毫秒</td>
</tr>
<tr>
<td>slideUp（）上滑动</td>
<td>slideUp([speed][sesing] [fn])
<br>
通过高度的变化，向上减小的动态效果 上滑效果
</td>
<td>$('.p2').slideUp(1000)</td>
<td>类选择器p2 上滑动效果 时长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>
通过不透明度的变化来实现匹配到元素的淡入的效果;
</td>
<td>$('.box1').fadeIn(1000)</td>
<td>类选择器box1 淡入动画效果 时长1000毫秒</td>
</tr>
<tr>
<td>fadeOut（）淡出动画</td>
<td>fadeOut([speed] [fn])
<br>
通过不透明度的变化来实现匹配到元素的淡出的效果;
</td>
<td>$('.box2').fadeOut(1000)</td>
<td>类选择器box2 淡出动画效果 时长1000毫秒</td>
</tr>
<tr>
<td>fadeToggle（）淡入/淡出切换</td>
<td>
fadeToggle([speed] [fn])
<br>
通过不透明度的变化来开关所有匹配元素的淡入淡出效果;
</td>
<td>$('.box3').fadeToggle(1000) </td>
<td>对类选择器box 进行淡出淡入切换动画</td>
</tr>
<tr>
<td>fadeTo（）淡出到指定的值</td>
<td style="width:600px">
fadeTo([speed] opacity [fn])
<br>把所有匹配到元素的不透明度以渐进发方式调整到指定的不透明度;
speed:规定效果的时长<br>
fn:动画完成时执行是函数<br>
opacity：fadeTo()方法中必须参数，控制淡入淡出的效果的不透明度（值介于0与1之间）
</td>
<td>$('.box4').fadeTo(1000, 0.2)</td>
<td>box4类选择器 时长1000毫秒内淡出到0.2的透明度<br>
数值1即没效果，0则全部淡出
</td>
</tr>
<tr>
<td>animate()方法创建自定义的动画</td>
<td>:$(selector).animate({params},speed,fn);
<br>
必需的 params 参数定义形成动画的 CSS 属性。<br>
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。<br>
可选的 fn是动画完成后所执行的函数
</td>
<td>单个操作css属性 <br>
$('p').animate({fontSize:'40px'},1500)
<br>
时长1500毫秒内选择器p内的字体放大到40px；
</td>
<td>同时操作多个css属性<br>
$('div').animate({ <br>
left:'400px', <br>
opacity:'0.3', <br>
height:'400px', <br>
width:'400px' <br>
width:'toggle' <br>
},1500)
<br>
说明：如想对元素位置进行位移，必须使用绝对定位position：absolute；<br>
这样left:'400px'就可以向右移动400px; <br>
同时自定义动画也可以使用预定义的值 show hide toggle <br>
如：width:'toggle'
</td>
</tr>
<tr>
<td> stop()停止动画效果</td>
<td>stop() 方法用于停止动画或效果，在它们完成之前； 该方法适用于所有 jQuery 效果函数，
包括滑动、淡入淡出和自定义动画 <br><br>
语法:$(selector).stop(stopAll,goToEnd) <br><br>
可选的参数 stopAll 规定是否应该清除动画队列。默认是 false 仅停止活动的动画，允许任何排入队列的动画向后执行<br>
可选的参数 goToEnd 规定是否立即完成当前动画。默认是 false <br>
默认情况下 stop() 会清除在被选元素上指定的当前动画
</td>
<td> $('#right').click(function(){ //获取向右ID 点击事件 <br>
$('.box1').animate({left:'+500px'},3000) //事件流1<br>
$('.box1').animate({fontSize:'30px'},500) //事件流2<br>
}) <br><br>
$('#stop').click(function(){ //点击事件<br>
$('.box1').stop(true) //停止事件<br>
$('.box1').stop(true,true) //两个true就是快速完成<br>
})
</td>
<td>停止动画可以对事件流进行停止，一个true是停止动画，两个true就是快速完成动画</td>
</tr>
</div>
</body>
</html>
批改老师：天蓬老师批改时间：2019-02-11 13:03:28
老师总结：运动和停止, 过度, 元素隐藏与显示,是最常用的动画样式,要多练习
