jQuery的動畫高度的容器

Question

我知道一些解決方案，但不是我想要的。

我希望動畫的高度是容器的高度時，文字淡入

這是我試過到目前爲止： 小提琴：https://jsfiddle.net/jzhang172/rxbnnvdf/1/

$(function(){ 
 
$('.box').click(function(){ 
 
var heightbox = $(this).innerHeight(); 
 
var heightparagraph=$(this).find('p').innerHeight(); 
 
var trueheight=heightbox+heightparagraph; 
 
console.log(heightbox); 
 
console.log(heightparagraph); 
 
console.log(trueheight); 
 
$(this).animate({height: trueheight}, {duration:500}); 
 
$(this).find('p').fadeIn(1000); 
 
}); 
 

 
});

.box{ 
 
    width:100%; 
 
    height:50px; 
 
    border-bottom:1px solid black; 
 
    cursor:pointer; 
 
    overflow:hidden; 
 
} 
 
.box h2{ 
 
    margin:0px; 
 
    padding-top:25px; 
 
} 
 
body,html{ 
 
    padding:0; 
 
    margin:0; 
 
    
 
} 
 
.box p{ 
 
    display:none; 
 
} 
 
*{ 
 
    box-sizing:border-box; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box one"> 
 
    <h2> 
 
    Box One 
 
    </h2> 
 
    <p class="info"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae tortor id massa tempus ultricies in a diam. Aliquam consectetur dui arcu, non volutpat mauris tempor eget. Donec et nibh ornare, pretium lorem nec, sagittis dui. Donec efficitur pulvinar mauris eget fringilla. Donec vulputate lectus suscipit mauris egestas mollis. Donec at risus dolor. Sed tincidunt, enim nec pharetra condimentum, massa eros condimentum nisi, ac ullamcorper erat lacus et urna. Proin urna sapien, convallis vel tellus vitae, vulputate congue mi. 
 
    </p> 
 
</div> 
 
<div class="box two"> 
 
    <h2> 
 
    Box Two 
 
    </h2> 
 
    <p class="info"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae tortor id massa tempus ultricies in a diam. Aliquam consectetur dui arcu, non volutpat mauris tempor eget. Donec et nibh ornare, pretium lorem nec, sagittis dui. 
 
    </p> 
 
</div>

Answer 1

您錯過了保證金。你需要這個：

var heightbox = $(this).find('h2').outerHeight(); // because otherwise the box will keep on increasing in height with every click. 
var heightparagraph=$(this).find('p').outerHeight(true); // true argument includes the margin of the element to the height. 

Fiddle