combining slideToggle successfully with min-height

问题

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.

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);
  });
});

Here is a fiddle http://jsfiddle.net/HZACf/

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

Thanks for your help!

回答1:

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);
    });
});

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

Fiddle here

来源：https://stackoverflow.com/questions/15495760/combining-slidetoggle-successfully-with-min-height