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

我想在div中对内容进行一些“预览”，所以我把它做得很小，只显示了第一行。 现在我要设置它的动画，当你点击标题时，div将具有100％的高度，但是当我使用animate（高度：“100％”）时，没有很好的滑动。

title: 
 content
 content_hidden 
  $('.show_it').click(function() { $(this).next("div").animate({ height: 'auto' }, 1000, function() { }); });   div{ height:20px; overflow:hidden; }  

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（）; 这是一个更好的方法。

Answer 2

或这个：

 $('.show_it').click(function(){ $(this).parent().next("div").css("height", "100%"); var h = $(this).parent().next("div").height(); $(this).parent().next("div").css("height", "0px"); $(this).parent().next("div").animate({height: h}, 1000, function() { }); }); 

Answer 3

试试这个

 $('.show_it').click(function() { var $div = $(this).parent().next("div"); var h = $div.children().each(function(){ h = h+ $(this).height(); }); $div.animate({ height: h }, 1000, function() { }); });