jQuery：animate，制作平滑的下拉菜单

[code=plain].div,ul,p{
cursor: pointer;  //小手样式
}
div,ul{
width: 150px;margin: auto;
text-align: center;
}
div{
margin-top: 50px;
border: 1px solid #9599A2;
padding: 5px 0;
border-radius: 3px;
}
ul{
border-bottom: 1px solid aqua; //设置下拉框的底边框颜色
border-right: 1px solid aqua;    //设置下拉框的右边框颜色
border-left: 1px solid aqua;    //设置下拉框的左边框颜色
height: 0;    //设置高度下拉框的高度为0，就可用anmate让下拉狂达到平滑下拉
display: none;
border-radius: 0 0 3px 3px;
padding: 0 1px;
opacity: 0;    //设置透明度，让透明度从0开始渐变为1
background-color: aliceblue;
}
p{
padding: 5px 0;
margin: 0;
}
p:hover{
background-color: aqua;
border-radius: 0 0 3px 3px;
}

[code=plain]<div>请选择客车</div>
<ul>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</ul>

[code=plain]$("div").click(function(){
//一开始下拉框是隐藏的，显得将它“显示”出来，当前还是透明的
$("ul").css("display","block");
//获取下拉的项目栏的个数，用来计算下拉框要渐变到多长
window.height =$(".modal-ctt p").length;
$("ul").animate({
height: height *25 +'px',
opacity: 1
},height *60); //这里是根据下拉菜单的项目栏个数，改变渐变时间
});

$("p").click(function(){
//获取被点击的项目栏的值，并放到显示栏（DIV）中
var value =$(this).val();
$("div").text(value);
//点击完项目栏，侧让下拉框收回去，用animate让height和opacity渐变为0；
$("ul").animate({
height: 0,
opacity: 0
},height *60);
//收回去后，下拉框只是变透明的，下拉框的内容还是在的，
//所以我们要在下拉框收完后，将下拉框隐藏，可以用setTimeout在渐变完成后将下拉框隐藏
setTimeout(function(){
$("ul").css("display","none");
},height *60);
});