可湿性粉剂+；jquery阅读更多、更平滑的向下滑动/替换？

我正在建立一个Wordpress网站，边栏中有简短的新闻摘录，jQuery read more按钮直接显示文章的其余部分，而不链接到其他页面。 目标是获得比我目前拥有的更流畅的阅读和更多的幻灯片。 我的主要问题是，从可湿性粉剂的角度来看，将帖子分成两个部分，一个是摘录字段，另一个是内容字段（其余部分），这对用户来说不够友好。因此，我目前使用以下代码：

            $(function () {
             $('.content').hide();
             $('a.read').click(function () {
                 $(this).parent('.excerpt').hide('fast');
                 $(this).closest('.article-jquery').find('.content').slideDown('fast');
                 return false;
             });
             $('a.read-less').click(function () {
                 $(this).parent('.content').slideUp('fast');
                 $(this).closest('.article-jquery').find('.excerpt').slideDown('fast');
                 return false;
             });
         });

以及：

您可以清楚地看到摘录的第一个块消失了，新的部分重复部分滑过了它。 有没有办法让这一切变得更顺利/不显得怪异

提前感谢

您可以使用确保在开始下一个动画之前完成一个动画。那可能会把事情整理得更整洁一些

$('a.read').click(function () {
    $(this).parent('.excerpt').hide('fast', function() {
        $(this).closest('.article-jquery').find('.content').slideDown('fast');
        return false;
    });
});

---

我不确定我是否理解这个解决方案，但以下是我将如何解决它自己

删除元素“.extract”

将内容的线宽设置为合适的值，例如2.2。然后将“.content”的最大高度设置为8.8，并带有溢出：隐藏。这将为我们提供4行文本

单击“阅读更多”时，我们将删除最大高度

CSS

jQuery

// Let's trigger all elements that has a class that starts with "read-"
$('[class^="read-"]').on('click',function(){
    // Since .content is .read-more's parent, lets take the parent()
    // And use slideToggle instead of checking if element is open or closed
    $(this).parent().slideToggle();
});

加价

<article id="post-<?php the_ID(); ?>" class="article-jquery">   

    <h2 class="front-small-header" id="<?php the_ID(); ?>"><?php the_title(); ?></h2>

    <div class="content">
        <?php the_content(); ?><span class="read-more">Read More</span>
    </div>

</article>

---

谢谢你的帮助。最后使用了一个名为collapse-o-matic的插件，这个插件更流畅。谢谢你的帮助。最后使用了一个名为collapse-o-matic的插件，这个插件稍微平滑一些。
// Let's trigger all elements that has a class that starts with "read-"
$('[class^="read-"]').on('click',function(){
    // Since .content is .read-more's parent, lets take the parent()
    // And use slideToggle instead of checking if element is open or closed
    $(this).parent().slideToggle();
});

<article id="post-<?php the_ID(); ?>" class="article-jquery">   

    <h2 class="front-small-header" id="<?php the_ID(); ?>"><?php the_title(); ?></h2>

    <div class="content">
        <?php the_content(); ?><span class="read-more">Read More</span>
    </div>

</article>