将 slideToggle 与 min-height 成功结合

Question

我目前在我的网站顶部有一个很好的隐藏部分，点击后会向下滑动。动画与 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。

小提琴here