jquery - 用动画从下往上展开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)

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