3

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!

4

1 回答 1

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。

在这里提琴

于 2013-03-19T13:38:43.913 回答