jquery - 具有负边距的slideToggle无法正常工作

我有一个div，我在用slideToggle()显示的隐藏元素上使用负边距。但是，负边界在完全可见之前不会对元素产生影响。有什么办法可以使元素以已应用负边距的方式显示？ （有一个特定的原因，我在这里使用负边距，这在我的代码示例中不会很明显）。

$(function() {
  $('.info').click(function() {
    $('.more-info').slideToggle(500);
  });
});

.info {
  height:150px;
  display:table-cell;
  vertical-align:middle;
  cursor:pointer;
}

.more-info {
  margin-top:-30px;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info">
  View more +
</div>
<div class="more-info">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce venenatis vehicula venenatis. Nunc at maximus erat. Sed sed vestibulum diam. Aliquam erat volutpat. Quisque semper mi nec finibus suscipit. Curabitur ac fringilla orci, vel semper massa. Aenean mattis vel libero ut vulputate. Nunc a vulputate libero. Praesent tristique dictum dictum. In consectetur, nisl in semper lacinia, ligula risus pharetra nisl, sit amet congue felis odio sed dolor. Nullam pharetra varius orci, non dapibus diam dapibus at. Donec felis urna, laoreet id blandit id, vestibulum vulputate eros. Phasellus nunc odio, cursus quis tempor nec, accumsan eu lectus.</p>
</div>

最佳答案

您可以使用translateY()代替margin

$(function() {
  $('.info').click(function() {
    $('.more-info').slideToggle(500);
  });
});

.info {
  height:150px;
  display:table-cell;
  vertical-align:middle;
  cursor:pointer;
}

.more-info {
  transform: translateY(-30px);
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info">
  View more +
</div>
<div class="more-info">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce venenatis vehicula venenatis. Nunc at maximus erat. Sed sed vestibulum diam. Aliquam erat volutpat. Quisque semper mi nec finibus suscipit. Curabitur ac fringilla orci, vel semper massa. Aenean mattis vel libero ut vulputate. Nunc a vulputate libero. Praesent tristique dictum dictum. In consectetur, nisl in semper lacinia, ligula risus pharetra nisl, sit amet congue felis odio sed dolor. Nullam pharetra varius orci, non dapibus diam dapibus at. Donec felis urna, laoreet id blandit id, vestibulum vulputate eros. Phasellus nunc odio, cursus quis tempor nec, accumsan eu lectus.</p>
</div>