jQuery动画到容器的高度
jQuery animate to height of container
我知道一些解决方案,但不是我想要的。
我希望动画的高度是当文本淡入时容器的高度。
这是我迄今为止所尝试的:小提琴: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>
您缺少边距。你需要这个:
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
相关文章:
- 如何将高度动画设置为自动
- 如何设置'auto'JQuery动画中的高度
- 为矩形制作动画'它的高度应该上升,而不是下降
- 格林索克动画不适用于 SVG 高度
- 纯JavaScript - 定时动画 - 一致的高度
- 制作jQuery高度百分比动画
- jQuery在.show期间设置高度动画('幻灯片')
- jQuery动画到容器的高度
- 替换后将动画设置为高度0
- 动画渐变(javascript)背景不会延伸到窗口的整个高度
- 核心动画页面中的聚合物内容标签不会;t测量高度
- 页脚在滚动底部时没有设置高度动画
- CSS 切换过渡动画,自动高度不起作用
- 制作潜水高度动画
- Javascript在Angular中切换高度动画
- 设置高度动画时元素跳跃
- Div高度动画会导致Div在jQuery中更改对齐方式
- 在高度动画后获取回调
- Javascript高度动画问题
- 如何在jQuery中反转高度动画方向