animate() 效果方法特点
- animate() 方法可执行 CSS 属性集的自定义动画，该方法通过 CSS 样式将元素从一个状态改变为另一个状态，从而实现渐变，达到动画效果。
- 只有 数字值 可创建动画（比如 “margin:30px”）。字符串值无法创建动画（比如 “background-color:red”），百分比无法达到渐变效果。
- 如果要创建不断递增的动画或者相对动画，需要使用 “+=” 或 “-=” 来创建，相当于长度宽度在不断递增。
基本语法
(selector).animate({styles},speed,easing,callback)
demo 简易侧边栏下拉列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<style>
/**{border: 1px sliid black;margin: 0;}*/
.head,.head_open{
position: fixed;
top: 0;
background: lavender;
}
.head_open{
top: 30px;
}
.head img,.head_open img{width: 200px;height: 100px;}
.head ul{
height: 20px;
padding: 5px 0;
font-size: small;
text-align: center;
}
.head ul:hover{background: whitesmoke;}
.head_firstpage li{display: none;width: 100%;padding: 5px 0;text-align: center;}
.head_special li{display: none;width: 100%;padding: 5px 0;text-align: center;}
.head_new li{display: none;width: 100%;padding: 5px 0;text-align: center;}
.head ul li:hover{background: red;}
.head ul li a{text-decoration: none;color: black;font-size: 10px;}
</style>
</head>
<body>
<div class="head">
<img src="img/ratate_img (3).png"/>
<ul class="head_firstpage">首页：渐变打开，渐变关闭
<li><a href="#">门户</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">内网</a></li>
</ul>
<ul class="head_special">特色商品：瞬间打开，瞬间关闭
<li><a href="#">论坛活动</a></li>
<li><a href="#">节日礼物</a></li>
<li><a href="#">积分兑换</a></li>
</ul>
<ul class="head_new">最新上架：瞬间打开，渐变关闭
<li><a href="#">总部出品</a></li>
<li><a href="#">联合出品</a></li>
</ul>
</div>
</body>
<script>
$(document).ready(function(){
/* 点击展开 首页列表*/
$(".head_firstpage").click(function(){
$(".head_firstpage").animate({height:"100px"})
/* 在此处使用 jQuery css() 方法更改背景色，
* 此时，在 style 中设置的 :hover 已经失效
$(".head_firstpage").css("background","lightgray")*/
$(".head_firstpage li").css("display","block")
})
$(".head_firstpage").mouseleave(function(){
$(".head_firstpage").animate({height:"20px"},"slow")
/* css 的 :hover 效果无法从 jQuery 方法中获取，
* 因此，如果在jQuery中改变了背景色，将会使其在 css 中设置的 :hover 失效
$(".head_firstpage").css("background","red")
$(".head ul:hover").css("background","whitesmoke")*/
$(".head_firstpage li").css("display","none")
})
/* 点击展开 特色商品 列表*/
$(".head_special").click(function(){
$(".head_special").animate({height:"100%"},"slow")
$(".head_special li").css("display","block")
})
$(".head_special").mouseleave(function(){
$(".head_special").animate({height:"100%"})
$(".head_special li").css("display","none")
})
/* 点击展开 最新上架 列表*/
$(".head_new").click(function(){
/* animate() 效果方法，当变化的属性是 100% 时，表现为瞬间的效果*/
$(".head_new").animate({height:"100%"})
$(".head_new li").css("display","block")
})
$(".head_new").mouseleave(function(){
/* animate() 效果方法，当变化的属性是具体的长度，而不是百分号时，表现为渐变的效果*/
$(".head_new").animate({height:"20px"})
$(".head_new li").css("display","none")
})
})
</script>
</html>
Reference
jQuery animate() 方法