摘要：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自定义导航栏</title>
<script src="../../demo/js/jq_3.3.1_mi.js"></script>
<style>
ul{
list-style-type: none;
position: relative;
}
ul li{
float: left;
padding: 8px 16px;
border: 1px solid #ff6500;
}
li a{
color: #000;
text-decoration: none;
}
#a2{
position: absolute;
left: 0;
top: 39px;
}
#a2 li{
width: 113px;
display: none;
}
</style>
</head>
<body>
<script>
// $(document).ready(function(){
// // $('div').css('background','red')
// $('li').hover(function(){
// $('a1').css('display','block')
// },function(){
// $('ai').css('display','none')
// })
// })
$(document).ready(function(){
$("#a1").hover(function(){
$('#a3').css("display","block")
},function(){
$('#a3').css("display","none")
})
})
</script>
<ul>
<li id="a1"><a href="#home">鼠标按顺序移动</a>
<ul id="a2">
<li id="a3"><a href="">测试</a></li>
</ul>
</li>
<li><a href="#news">1</a></li>
<li><a href="#contact">2</a></li>
<li><a href="#about">3</a></li>
<li><a href="#about">点击</a></li>
</ul>
<!-- <div style="width:100px;height:100px;border:1px solid red;" id="a1">点击</div>
<div style="width:100px;height:100px;border:1px solid red;display: none" id="a2">隐藏</div> -->
</body>
</html>
总结：
1、发现animate不能做控制元素的背景颜色
2、用hover方法做的隐藏显示效果
不知道算不算是动画，用导航栏做的效果一时间想起来的是改变背景颜色还有隐藏显示二级菜单
批改老师：西门大官人批改时间：2019-02-17 09:05:56
老师总结：严格意义上来说，这不是动画，仅仅是用jquery控制了元素的css样式。
