Javascript JQuery-“JQuery；阅读更多“；幻灯片动画

我创建了一个博客，并添加了一个插件，通过“阅读更多”按钮按高度截断文本

这是javascript函数：

(function ( $ ) {
$.fn.readMoreFade = function(options) {
    var settings = $.extend({
        backgroundColor: "white",
        buttonClass: "button"
    }, options );

    this.css( "height", 325 );
    this.css( "overflow", "hidden" );
    this.css( "position", "relative" );
    this.append('<p class="readMoreFade"><a href="#" class="btn btn-red">Ler Mais</a></p>')

    var readMoreButton = this.find('.readMoreFade');
    var backgroundString = settings.backgroundColor ? settings.backgroundColor : this.css('background-color');

    readMoreButton.css('background-image', '-webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(0,255,255,0)),color-stop(1, '+backgroundString+'))');
    readMoreButton.css('text-align', 'center');
    readMoreButton.click(function(){
            totalHeight = 0

            $el = $(this);
            $p  = $el;
            $up = $p.parent();
            $ps = $up.find("p:not('.readMoreFade'), ul:not('.readMoreFade'), ol:not('.readMoreFade'), img:not('.readMoreFade'), h2:not('.readMoreFade'), h3:not('.readMoreFade'), h4:not('.readMoreFade'), h5:not('.readMoreFade')");

            $ps.each(function() {
                totalHeight += $(this).outerHeight();
            });

            $up
                .animate({
                    "height": totalHeight
                });

            // fade out read-more
            $p.fadeOut();

            // prevent jump-down
            return false;
    })

    return this;
};

（函数（$）{
$.fn.readMoreFade=函数（选项）{
变量设置=$.extend({
背景颜色：“白色”，
按钮类：“按钮”
}，选项）；
css（“高度”，325）；
css（“溢出”、“隐藏”）；
css（“位置”、“相对”）；
追加（“
”）
var readMoreButton=this.find（'.readmorefead'）；
var backgroundString=settings.backgroundColor？settings.backgroundColor:this.css（'background-color'）；
css（'background-image'，'-webkit渐变（线性，左上，左下，颜色停止（0，rgba（0255255,0）），颜色停止（1'，+backgroundString+））；
css（'text-align'，'center'）；
readMoreButton.单击（函数（）{
总高度=0
$el=$（此项）；
$p=$el；
$up=$p.parent（）；
$ps=$up.find（“p:not（'.readmorefead'）、ul:not（'.readmorefead'）、ol:not（'.readmorefead'）、img:not（'.readmorefead'）、h2:not（'.readmorefead'）、h3:not（'.readmorefead'）、h4:not（'.readmorefead'）、h5:not（'.readmorefead'）；
$ps.each（函数（）{
totalHeight+=$（this.outerHeight（）；
});
美元起
.制作动画({
“高度”：总高度
});
//淡出阅读更多
$p.fadeOut（）；
//防跳
返回false；
})
归还这个；
};

}（jQuery））

但是，问题是：文本完成后，它给了很多空间。 我想知道是否有办法“删除”这个空白（下图中的黄色空间）

---

请分享您的代码，以便为您提供适当的解决方案。这些问题都已得到很好的解决，有大量的预打包解决方案可用于各种不同的平台。你为什么要自己编写代码？