jquery - 缓出和缓入阅读更多文本

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);

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