您正在设置高度的动画,这是正常的,您还可以设置动画
margin-top
使用负值重叠文本
(如有必要,只需添加高z索引,确保按钮不会位于文本后面)
$(document).ready(function() {
$('button').on('click', function(){
$(this).animate({'height': '100px','marginTop': '-50px'});
});
});
.div_1{
width: 300px;
height: 150px;
background: blue;
color: #fff;
}
button{
width: 300px;
height: 50px;
border: 0;
display: block;
position:relative;
}
button:nth-of-type(1){
background: yellow;
}
button:nth-of-type(2){
background: green;
}
button:nth-of-type(3){
background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div_1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essenti</div>
<div class="buttons_div">
<button>1</button>
<button>2</button>
<button>3</button>
</div>
<div class="div_1"></div>
