首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >jQuery -如何使用高度动画一个div :auto

jQuery -如何使用高度动画一个div :auto
EN

Stack Overflow用户
提问于 2014-06-13 17:06:09
回答 3查看 59关注 0票数 0

我有一个div,当用户按下“更多”时,它向下扩展。div的高度总是自动的,并且扩展到相应的内容。

我需要保持“高度:自动”,以便在调整屏幕大小时,CSS保持响应,但我希望更改的高度是animated...how,我应该这样做吗?

换句话说,当用户按下更多的附加内容到这个div时,我希望div的扩展是动画化的,而不指定5em之类的特定高度。

代码语言:javascript
代码运行次数:0
运行
复制
<div id="expand">
    <p>This is the div I want to expand</p>
    <div id="hidden" style="display:none">
       <img />
       <img />
    </div>
</div>

明白了!我需要使用slideToggle方法代替感谢!

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2014-06-13 17:17:42

我不知道你是怎么设置代码的,但是jQuery

代码语言:javascript
代码运行次数:0
运行
复制
$(link).on("click", function() {
   $(element).slideToggle();
});

可能对你有用。

这就是你要找的吗?

票数 0
EN

Stack Overflow用户

发布于 2014-06-13 17:19:22

你总是可以:

代码语言:javascript
代码运行次数:0
运行
复制
var targetDiv = $('.targetDiv');
// get original Height
var originalHeight = targetDiv.height();
// get natural height
targetDiv.css({ height: 'auto'});
var naturalHeight = targetDiv.height();
// reset div to original height
targetDiv.css({height: originalHeight});
// animate to target height
targetDiv.animate({
   height: naturalHeight}, {
   duration: 1000,
   completion: function() {
      // set height to auto
      targetDiv.css({height: 'auto'});
   });
票数 0
EN

Stack Overflow用户

发布于 2014-06-13 18:23:03

您可以使用jQuery来完成这个任务。你只需要计算height: auto的绝对高度。

JSFiddle:http://jsfiddle.net/CS2h9/

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/24210496

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档