、<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手风琴-A</title>
<style>
.accoding{ width: 400px; }
.slide{background:
.title{height: 100px; background-color:rgba(0,0,0,.3)}
.on{ height: 400px;}
</style>
</head>
<body>
<div class="accoding">
<div class="slide on">
<div class="title">标题1</div>
</div>
<div class="slide">
<div class="title">标题2</div>
</div>
<div class="slide">
<div class="title">标题3</div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
$(function(){
// 当鼠标移入到slide时候
$(".slide").mouseover(function(){
// 如果自己本来就有了on（他自己已经是展开的）返回
if($(this).hasClass("on")){return}
// 让有on的元素 动画到100px高度，400毫秒，动画完毕移除class on
$(".on").animate({height:"100px"},400,function(){
$(this).removeClass("on");
})
$(this).addClass("on").animate({height:"400px"},400)
})
})
</script>
</body>
</html>
