结合slideToggle成功与最小高度 [英] combining slideToggle successfully with min-height

问题描述

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

I currently have a nicely hidden section at the top of my site which slides down upon click. The animation works great with slideToggle but I'd also like the div to cover at least the window height.

我已经设置窗口高度为一个变量和alter

I have managed to set the window height as a variable and alter the css to reflect this but combining it with the slideToggle makes the animation jumpy.

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的前两行，它会正常滑动。

If you remove the first two lines of the jQuery, it slides as normal.

感谢您的帮助！

推荐答案

c> animate ：

Try 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 。

I've used animate but you can use slideToggle instead as we are solely dealing with the elements' height now.

小提示这里

这篇关于结合slideToggle成功与最小高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！