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，因为我们只处理元素＆＃39; height现在。

小提琴here

将slideToggle与min-height成功组合

1 个答案: