jquery - 将 slideToggle 与 min-height 成功结合

Question

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

我已经设法将窗口高度设置为一个变量并更改 css 以反射(reflect)这一点，但是将它与 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);
  });
});

这是一个 fiddle 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，因为我们现在只处理元素的高度。

fiddle here