<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点击改变高度(动画)和位置,再点击变回</title>
<style>
#gao {
background-color: aquamarine;
width: 100%;
height: 70%;
position: absolute;
bottom: 0;
}
#dian {
width: 98%;
height: 40px;
position: absolute;
top: 50%;
}
</style>
</head>
<body style="height:800px;">
<div id="gao">
<div style="width:100%;height:100%;position: relative;">
<button id="dian">点button改高改button位置</button>
</div>
</div>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
document.getElementById('gao').style.height = '70%';
$("#dian").click(function () {
if (document.getElementById('gao').style.height == '70%') {
$("#gao").animate({
height: "100%"
});
$("#dian").animate({
top: "0"
})
} else {
$("#gao").animate({
height: "70%"
});
$("#dian").animate({
top: "30%"
});
}
});
})
</script>
</body>
</html>