如何在jquery中将特定高度设置为100%

Question

我希望在div中对内容进行一些"预览",所以我把它做得很小,只显示了第一行.现在我要设置它的动画,当你点击标题时,div将具有100%的高度,但是当我使用animate(高度:"100%")时,没有很好的滑动.

<a href="javascript:void(0);" class="show_it">title:</a>
<div>
    content<br>
    content_hidden
</div>

<script>
$('.show_it').click(function() {
  $(this).next("div").animate({
    height: 'auto'
  }, 1000, function() {
  });
});
</script>

<style>
div{
    height:20px;
    overflow:hidden;
}
</style>

Answer 1

虽然我确信有更好的方法可以做到这一点,因为这个方法很麻烦AT BEST,如果你找不到另一个解决方案,你总是可以试试这个:

$('.show_it').click(function() {

// Animate to 100% in 1 millisecond
$(this).parent().next("div").animate({height: 'auto'}, 1);

// Record the height of the div
var newHeight = $(this).parent().next("div").height();

// Animate height to 0% in 1 millisecond
$(this).parent().next("div").animate({height: '0px'}, 1);

// Do the animation using the new fixed height.
  $(this).parent().next("div").animate({
    height: newHeight,
  }, 1000, function() {
  });
});

但是,正如我所说,这非常草率 - 如果它符合您的需求,请尝试jquery slideDown(); 这是一个更好的方法.