abstract：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&quo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动画效果的导航</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
*{ margin:0px; padding:0px;}
.header{ width:100%; height:60px; background:#000}
.main{
width: 980px;
height: 60px;
background: #CCC;
margin: auto;
}
ul{ list-style:none;}
ul li{
float: left;
height: 35px;
width: 80px; text-align:center; margin-top:20px;
}
.twobox{
height: 160px;
width: 170px;
}
.twobox li{
height: 30px;
width: 80px;
position: relative;
font-size: 14px;
text-align:center;
}
.twobox li:hover{
background: #999;
}
</style>
</head>
<body>
<script>
$(function(){
$('.twobox').hide()
$('.one').mouseover(function(){
$('.twobox').slideDown(500)
$('.one').mouseleave(function(){
$('.twobox').slideUp(500)
})
})
})
</script>
<div class="header">
<div class="main">
<ul class="one">
<li>首页</li>
<li>编程词典
<ul class="twobox">
<li>php词典</li>
<li>jquery词典</li>
<li>html词典</li>
<li>javascript词典</li>
<li>技术文章</li>
<li>php教程</li>
<li>小程序开发</li>
<li>html教程</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
<!-- jquery动画总结
hide()
show()
toggle() 切换
fadeIn() 淡入
fadeOut()
fadeToggle() 切换
fadeTo() 渐近 0~~1
slideDown() 滑下
slideUp() 滑上
slideToggle() 切换
animate() 自定义动画
$(function(){
$('button').click(function(){
$('div').animate({left:'250px'},1000)
})
})
stop() 停止动画
-->
Correcting teacher：韦小宝Correction time：2019-01-12 09:17:35
Teacher's summary：看到你这头部 总感觉像是复制过来的 相信你肯定不是复制的 动画效果总结的很完整 不错 课后要记得多练习练习
