<style>
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
.main div{
width: 800px;
height: 80px;
margin-bottom: 10px;
background: #fcc;
}
</style>
<body>
<div id="main" class=‘main‘>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
<script src="jquery-1.7.2.js"></script>
<script>
$(function () {
$(‘#main div‘).hover(
function(){
var _this = $(this);
$(this).animate({
"height" : "100px"
},600,function(){
_this.css({"background" : "#ccf"});
});
},function(){
var _this = $(this);
$(this).animate({
"height" : "80px"
},600,function(){
_this.css({"background" : "#fcc"});
});
}
)
});
</script>
JQ特效开发系列——鼠标移入时div高度和颜色发生变化 animate,布布扣,bubuko.com
JQ特效开发系列——鼠标移入时div高度和颜色发生变化 animate
原文：http://www.cnblogs.com/hr2014/p/3796119.html