jQuery - 动画/滑动到高度：100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1263789/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - animate / slide to height: 100%
提问by Mike
I have a siple code here:
我在这里有一个简单的代码：
$('.aktualita_sipky').toggle(function() {
$(this).parent().find('.aktualita_content').animate({
height: "100%",
}, 1500 );
}, function() {
$(this).parent().find('.aktualita_content').animate({
height: "120px",
}, 1500 );
});
Now when I click it as the first 'toggle', it just shows instantly (without the animation), when I click the the second 'toggle', it nicely slides up.
现在，当我单击它作为第一个“切换”时，它会立即显示（没有动画），当我单击第二个“切换”时，它会很好地向上滑动。
Is there a way to slide it down to 100% with that nice animation?
有没有办法用那个漂亮的动画将它向下滑动到 100%？
回答by karim79
Maybe you could do something like:
也许你可以这样做：
$height = $(window).height(); // returns height of browser viewport
//Or
$height = $(document).height(); // returns height of HTML document
//Or
$height = $(whatever).height();
$('.aktualita_sipky').toggle(function() {
$(this).parent().find('.aktualita_content').animate({
height: $height + 'px',
}, 1500 );
}, function() {
$(this).parent().find('.aktualita_content').animate({
height: $height + 'px',
}, 1500 );
});
回答by Jason Grey
My workaround for this was to add up the heights of the child elements in the div, adding a little bit to account for margins:
我的解决方法是将 div 中子元素的高度相加，添加一点以考虑边距：
function() {
$('.accordionblock.open').removeClass('open');
var childrenheight = 0; $(this).children().each(function() {childrenheight += ($(this).height()*1.2)});
$(this).animate({height:childrenheight},300).addClass('open');
}
}
回答by user1473247
I found this post while looking for a solution myself and Karim79 had the great suggestion of using a variable and the height()function.
我在自己寻找解决方案时发现了这篇文章，Karim79 提出了使用变量和height()函数的好建议。
For me I don't start with the height at 100% since I have a preset height defined in my stylesheet. So what I do in the function to expand is I make a variable that has a query to steps back to the specific element I want to expand and changes the css height to 100% and return the height to a variable. Then I set the css for the height back (I suppose I could have used to vars told the original preset height as well incase I edit the css in the future) and then run the animation function using the var with height.
对我来说，我不会从 100% 的高度开始，因为我在样式表中定义了预设高度。所以我在扩展函数中所做的是我创建一个变量，该变量具有一个查询以返回到我想要扩展的特定元素，并将 css 高度更改为 100% 并将高度返回到一个变量。然后我将高度设置为 css（我想我本可以使用 vars 告诉原始预设高度以及以防我将来编辑 css），然后使用带有高度的 var 运行动画函数。
function expandAlbum (){
var fullHeight = jQuery(this).prev('.albumDropdown').css('height' , '100%').height();
jQuery(this).prev('.albumDropdown').css('height' , '145px');
jQuery(this).prev('.albumDropdown').animate({'height' : fullHeight}, 1000, function(){jQuery(this).stop();});
jQuery(this).html('close');
}
I am also not very experienced so forgive sloppy coding.
我也不是很有经验，所以请原谅草率的编码。
