添加简单的向下滑动动画以“阅读更多”文本显示

Question

我有这个漂亮的代码片段，它在我的文本末尾添加了“多读”和“少读”，允许可见文本扩展和收缩。

我试图为此添加一个动画..所以它会上下滑动，而不仅仅是即时变化..

我尝试在多个部分中添加.slidDown和.slideUp。但它要么不起作用，要么隐藏了整个内容。

我还尝试添加transition: all 0.5s ease;内容包装器，但这也没有创建过渡。

任何帮助深表感谢！

工作 JS 小提琴

Answer 1

我可能会考虑使用slideToggle()来创建它。

下面将帮助您了解如何slideToggle工作的情况，但您可以将您的 read more/less 版本集成到其中以使其工作。

$( "button" ).click(function() {
  $( ".content" ).slideToggle( "fast" );
      var $this = $(this);
        $this.toggleClass("open");

        if ($this.hasClass("open")) {
            $this.html("Less");
        } else {
            $this.html("Read more");
        }
});

.content {
display:none;
}
p {
margin:0 0 10px;
}
button {
margin-top:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="summary"><p>This is your summary content...</p></div>
<div class="content">
<p>
  This is the paragraph to end all paragraphs.  You
  should feel <em>lucky</em> to have seen such a paragraph in
  your life.  Congratulations!
</p>
</div>
<button>Read more</button>

我希望这可以帮助你。