将slideToggle与min-height成功结合使用

我目前在我的网站顶部有一个很好的隐藏部分，点击后向下滑动。 使用slideToggle动画效果很好，但我也喜欢div至少覆盖窗口高度。

我已设法将窗口高度设置为变量并更改css以反映这一点，但将其与slideToggle组合会使动画变得浑浊。

jQuery(document).ready(function($) { var win = $(window).height(); $("#hidden").css("min-height", win); $("a#toggle").click(function() { var txt = $("#hidden").is(':visible') ? 'Show' : 'Hide'; $("#toggle").text(txt); $("#hidden").slideToggle(500); }); }); 

这是一个小提琴http://jsfiddle.net/HZACf/

如果删除jQuery的前两行，它会正常滑动。

谢谢你的帮助！

Answer 1

尝试animate ：

 jQuery(document).ready(function ($) { var $hidden = $("#hidden"), currentHeight = $hidden.height(), newHeight = $(window).height(); newHeight = (currentHeight > newHeight) ? currentHeight : newHeight; $("#hidden").css("height", newHeight); $("a#toggle").click(function () { var txt = $("#hidden").is(':visible') ? 'Show' : 'Hide'; $("#toggle").text(txt); $("#hidden").animate({ height : "toggle" }, 500); }); }); 

我已经使用过animate但你可以使用slideToggle因为我们现在只处理元素的height 。

在这里小提琴