使用动画从底部到顶部展开div

Question

我尝试从下到上设置按钮高度动画，并在按钮上方与div重叠。

所以从这个：

我会得到这样的东西：

 <div class="div_1"></div>
   <div class="buttons_div">
      <button>1</button>
      <button>2</button>
      <button>3</button>
   </dv>
 <div class="div_1"></div>

https://jsfiddle.net/o2gxgz9r/21096/

Answer 1

您正在为高度设置动画即可，您还可以使用负值为margin-top设置动画以重叠文本（只需确保按钮不会在文本后面添加如有必要，高z-index）

＆＃13;

＆＃13;

$(document).ready(function() {
  $('button').on('click', function(){
  	$(this).animate({'height': '100px','marginTop': '-50px'});
  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;