Question

我有这段漂亮的代码片段，可以添加更多内容。＆安培; ＆＃34;阅读更少＆＃34;在我的文本末尾，允许可见文本扩展和收缩。

我试图为此添加一个动画..所以它向下滑动而不仅仅是瞬间改变..

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

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

非常感谢任何帮助！

WORKING JS FIDDLE

Answer 1

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

以下内容将帮助您了解slideToggle如何工作的情况，但您可以将更多/更少的读取版本集成到其中，以使其正常运行。

$( "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>

我希望这会对你有所帮助。

Answer 2

您是否考虑过使用插件？

Readmore.js似乎完美地完成了这项工作，并提供了许多自定义选项。

＆＃13;

var lineHeight = 20;
var lines = 2;

$('.content').readmore({
  speed: 1000,
  collapsedHeight: lineHeight * lines
});

＆＃13;

* {
  margin: 0px;
  padding: 0px;
 }
  

.content {
  font-size: 14px;
  line-height: 20px;
}

＆＃13;

<div class="content">
  <p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipisicing elit. Totam suscipit veniam non <a href="#">magni similique</a>. Asperiores aut sapiente nobis porro ad provident eveniet eos aspernatur quidem iusto! Dolorum libero porro animi.</p>
  <p>Consectetur adipisicing elit. Sapiente aperiam voluptas mollitia laboriosam delectus <strong>possimus minus quaerat culpa</strong> eos corporis tenetur ducimus quo incidunt aspernatur doloremque unde nihil. Quis quaerat!</p>
  <p>Ea iusto obcaecati cumque quae numquam minima laboriosam porro sit a animi reprehenderit eveniet saepe aperiam optio nemo eos et. Eaque perferendis.</p>
</div>

<!-- jQuery 2.1.1 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Readmore.js -->
<script src="https://fastcdn.org/Readmore.js/2.1.0/readmore.min.js"></script>

＆＃13;

添加简单的向下滑动动画到＆＃34;阅读更多＆＃34;文字透露

2 个答案: