3

私は現在、私のサイトの上部に、クリックすると下にスライドするきれいに隠されたセクションがあります。アニメーションは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の最初の2行を削除すると、通常どおりスライドします。

ご協力いただきありがとうございます！

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使用できます。slideToggleheight

ここでフィドル

于 2013-03-19T13:38:43.913 に答える