JavaScriptコミュの【質問】jQuery プラグイン Slide box

はじめてトピックを立てさせていただきます。よろしくお願いします。
現在ホームページを作成している中で、jQueryのプラグインでSlide box
というものの導入を検討しています。
http://samuelgarneau.com/lab/slidebox/

設定はとてもシンプルなのですが、heightをpx指定ではなく%指定したときに
開くときのanimateが機能しません。閉じるときは問題ないのですが。

heightを%にしたい理由はウィンドウサイズによっては中身のコンテンツが表示されないためです。

コチラのブログも参考にしました。
http://www.kantenna.com/pg/2009/06/jquery_slide_box.php

http://semooh.jp/jquery/api/effects/animate/params,+%5Bduration%5D,+%5Beasing%5D,+%5Bcallback%5D/

以下のどの部分を変更すれば開くときもアニメーションが機能するのでしょうか？

ご教示おねがいいたします。
---------------------------

(function($){

$.fn.slideBox = function(params){

var content = $(this).html();
var defaults = {
width: "100%",
height: "200px",
position: "bottom" // Possible values : "top", "bottom"
}

// extending the fuction
if(params) $.extend(defaults, params);

var divPanel = $("<div class='slide-panel'>");
var divContent = $("<div class='content'>");

$(divContent).html(content);
$(divPanel).addClass(defaults.position);
$(divPanel).css("width", defaults.width);

// centering the slide panel
$(divPanel).css("left", (100 - parseInt(defaults.width))/2 + "%");

// if position is top we're adding
if(defaults.position == "top")
$(divPanel).append($(divContent));

// adding buttons
$(divPanel).append("<div class='slide-button'>開く</div>");
$(divPanel).append("<div style='display: none' id='close-button' class='slide-button'>閉じる</div>");

if(defaults.position == "bottom")
$(divPanel).append($(divContent));

$(this).replaceWith($(divPanel));

// Buttons action
$(".slide-button").click(function(){
if($(this).attr("id") == "close-button")
$(divContent).animate({height: "0px"}, 100);
else
$(divContent).animate({height: defaults.height}, 100);

$(".slide-button").toggle();
});
};

})(jQuery);