动画效果的导航
slideDown()、slideUp()方法用于导航下拉菜单的升降，尤其方便。
fadeTo()方法改变区块透明度，用来标识鼠标当前所在区块
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-3.3.1.js"></script>
<style>
*{margin: 0;padding: 0;}
body{background: gray;}
body>ul{width: 450px;margin: 20px auto;}
ul{list-style: none;}
li{width: 150px;height: 30px;text-align: center;}
body>ul>li{float: left;background: darkred;color: white;position: relative;line-height: 30px;}
li>ul{position: absolute;display: none;background: firebrick;}
</style>
</head>
<body>
<ul>
<li>产品
<ul>
<li>水果</li>
<li>花草</li>
<li>虫鱼</li>
</ul>
</li>
<li>新闻
<ul>
<li>国内</li>
<li>国际</li>
<li>本地</li>
</ul>
</li>
<li>关于我们
<ul>
<li>简介</li>
<li>联系方式</li>
<li>岗位空缺</li>
</ul>
</li>
</ul>
</body>
<script>
$(function () {
$("li:has(ul)").hover(
function () {
$(this).children('ul').slideDown(100);
},
function () {
$(this).children('ul').slideUp(10);
}
);
$("li>ul>li").hover(
function () {
$(this).fadeTo(200,0.3);
},
function () {
$(this).fadeTo(100,1);
});
});
</script>
</html>效果图
