Question

我有“阅读更多”的文字，当点击阅读更多时，文字会展开。现在文本立即扩展，我想更慢地扩展（缓出）。

HTML

<div class="comment more">
As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t t t this leadership role, he supervises client. As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client. As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client.As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client.
</div>

CSS

.comment {
    font-size: 18px;
    letter-spacing: 0.12em;
    max-width: 800px;
}
a.morelink{text-decoration:none;outline:none}.morecontent span{display:none}

JS

$(document).ready(function() {
    var showChar = 200;
    var ellipsestext = "...";
    var moretext = "Read More";
    var lesstext = "Close";
    $('.more').each(function() {
        var content = $(this).html();
        if (content.length > showChar) {
            var c = content.substr(0, showChar);
            var h = content.substr(showChar - 1, content.length - showChar);
            var html = c + '<span class="moreelipses">' + ellipsestext + '</span>&nbsp;<span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';
            $(this).html(html);
        }
    });
    $(".morelink").click(function() {
        if ($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });
});

JSFiddle演示：http://jsfiddle.net/039zkqbL/1/

Answer 1

不要使用.toggle()，请尝试

.animate({height: "auto"}, slow);

您也可以将速度更改为快速，或者更具体地说，您可以使用毫秒。

Answer 2

更改行

$(this).parent().prev().toggle();
$(this).prev().toggle();

到

$(this).parent().prev().slideToggle(); //or slideToggle("slow");
$(this).prev().slideToggle();

我尝试了但你必须对字符数进行一些调整。有些文字正在重复出现。

更改

var h = content.substr(showChar - 1, content.length - showChar);

到

var h = content.substr(showChar, content.length - showChar);

Answer 3

您可以使用animate()并使用max-height，因为您无法设置height:auto的动画。检查一下：

$(".morelink").click(function() {
        if ($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
            $(this).parents('.comment').animate({'max-height':'70px'}, 1000);           
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
            $(this).parents('.comment').animate({'max-height':'220px'}, 1000);
        }

        $(this).parent().prev().toggle();
        $(this).prev().fadeToggle(1100);
        return false;
});

FiddleDemo

Answer 4

我不会用jquery这样做我会推荐css3和过渡。

如果你想这样做，你只需要改变第二个文本块的高度。从0到高度实际上都有。

如果您不想计算第二个文本块的高度，也可以设置

height: auto;

和

max-height: 0;

所以你可以打开它只需将最大高度设置为任何值高度，如果达到内容高度，div将自动停止...

准确地说明我的意思是看到更新的工作fiddle。

问候timotheus

轻松和阅读更多文本

4 个答案:

FiddleDemo