摘要：总结：效果目前来看比较少，不知道是否够用。回头自己去看下有没有更多效果。最后的stop就没有敲了，感觉用不上。案例是结合了导航的做法，把鼠标事件也写了进去，不写容易忘。本章两个地方的作业写在一起了，所以代码是一样的，老师看了前面的代码就不用再看这个了。<!DOCTYPE html><html><head><meta charset="UTF-8&
总结：效果目前来看比较少，不知道是否够用。回头自己去看下有没有更多效果。
最后的stop就没有敲了，感觉用不上。案例是结合了导航的做法，把鼠标事件也写了进去，不写容易忘。本章两个地方的作业写在一起了，所以代码是一样的，老师看了前面的代码就不用再看这个了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq动画</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
*{margin:0 auto;}
ul{
margin: 20px 0px 0px 300px;
}
ul li{
display: inline-block;
height:28px;
border:1px solid pink;
line-height: 28px;
padding-left:0px;
color:pink;
}
li:hover{
background-color:pink;
color:#fff;
}
#down_div{
height: 28px;
width:100%;
background-color:pink;
margin:0px auto;
}
span{
color:#666;
margin:0px auto;
}
#b_box{
height: 200px;
width: 200px;
background-color:#888;
color:#fff;
position: absolute;
top:-200px;
left:500px;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
//显示隐藏
$('#down_div').hide()
$('#li1').mouseover(function(){
$('#down_div').show(500)
})
$('#li1').mouseout(function(){
$('#down_div').hide(500)
})
//淡入淡出
$('#li2').mouseover(function(){
$('#down_div').fadeIn(500)
})
$('#li2').mouseout(function(){
$('#down_div').fadeOut(500)
})
//滑动
$('#li3').mouseover(function(){
$('#down_div').slideDown(500)
})
$('#li3').mouseout(function(){
$('#down_div').slideUp(500)
})
//动画、移动
$('#li4').mouseover(function(){
$('#b_box').animate({top:'300px'},1500)
})
$('#li4').mouseout(function(){
$('#b_box').animate({top:'-300px'},1500)
})
})
</script>
<ul id="ul_out">
<li id="li1">显示隐藏</li>
<li id="li2">淡入淡出</li>
<li id="li3">滑上滑下</li>
<li id="li4">掉下个宝盒</li>
<li id="li5">导航五</li>
</ul>
<div id="down_div"><span>看到我就说明你成功啦</span></div>
<div id="b_box"><span>宝盒</span></div>
</body>
</html>
批改老师：天蓬老师批改时间：2018-11-06 07:43:35
老师总结：自定义动画,除了可以使用常用的快捷方式之外,还可以使用提供的统一方法,要多多练习
