[英]jQuery — how to animate a div using height:auto
I have a div that expands downward when a user presses "more." 当用户按下“更多”时,我的div向下扩展。 The div's height is always auto, and expands to fit the content accordingly. div的高度始终是自动的,并且会相应地扩展以适合内容。
I need to keep "height:auto" so that the CSS remains responsive when the screen is resized, but I want the changing height to be animated...how should I do that? 我需要保持“ height:auto”,以便在调整屏幕大小时CSS保持响应,但是我希望对不断变化的高度进行动画处理...我该怎么做?
In other words, when the user presses more and additional content is added to this div, I want the div's expansion to be animated, without specifying a certain height like 5em or anything. 换句话说,当用户按下更多键并将其他内容添加到此div时,我希望对div的展开进行动画处理,而不指定5em之类的特定高度。
<div id="expand">
<p>This is the div I want to expand</p>
<div id="hidden" style="display:none">
<img />
<img />
</div>
</div>
Got it! 得到它了! I need to use the slideToggle method on the instead of the Thanks! 我需要在而不是谢谢上使用slideToggle方法!
jsBin demo <-- Resize the window. jsBin演示 <-调整窗口大小。 Works great. 效果很好。
You can do it simply like: 您可以像这样简单地进行操作:
$('.more').click(function(){
$("+ div", this).slideToggle();
});
having: 具有:
<button class="more">MORE</button>
<div>Lorem Ipsum...</div>
I would use the HTML you have, but that's the price when you did not showed some code in your Question ;) 我会使用您拥有的HTML,但这就是您在Question中未显示任何代码时的价格;)
I don't know exactly how you set up your code, but jQuery 我不知道您如何设置代码,但是jQuery
$(link).on("click", function() {
$(element).slideToggle();
});
might work for you. 可能为您工作。
Is that what you are looking for? 那是您要找的东西吗?
You can always: 您可以随时:
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'});
});
You can do this using jQuery. 您可以使用jQuery完成此操作。 You just need to caluclate the height: auto
absolute height. 您只需要计算height: auto
绝对高度。
JSFiddle: http://jsfiddle.net/CS2h9/ JSFiddle: http : //jsfiddle.net/CS2h9/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.