如何解决单击“显示更多”按钮后如何在行上应用和移除褪色渐变色
我有一个页面显示用户提交的故事。每个故事只显示几行。有一个显示更多/显示更少的按钮。我想在最初的几句话之后创建一个淡入淡出的效果,以强调还有更多的阅读内容,但是我正在努力做到这一点。
我从这个问题开始尝试了代码link。尽管接受的答案中的代码会淡化我的整个页面,但并不是每个故事都单独出现。最终目标是使第3行和第4行淡入淡出,然后不褪色,并在按“显示更多”按钮时显示整个故事,并在按“显示较少”时再次消失。
编辑20200813::修改了post ::在相对位置之前的位置,用@ imvain2突出显示。我可以看到它位于后文本类文本前面的所需位置。但是:: before在页面上没有物理尺寸。参见下面的截图:
$(document).ready(function() {
$(".content").on("click",'.showMore',function() {
var $this = $(this);
var content = $this.prev()
var linkText = $this.text().toUpperCase();
if (linkText === "SHOW MORE") {
linkText = "Show less";
$this.siblings('div').css('height','auto');
var currHeight = $this.siblings('div').height();
$this.siblings('div').css('height','6em');
$this.siblings('div').animate({height: currHeight},500);
} else {
$this.siblings('div').animate({height: '6em'},500);
linkText = "Show more";
}
$this.text(linkText);
});
});
.post-text:before {
content:'';
width:100%;
height:100%;
position:relative; <!-- Edit 20200813 !-->
left:0;
top:0;
background:linear-gradient(transparent 150px,white);
}
.post-text {
letter-spacing: normal;
line-height: 2;
font-size: 16px;
font-family: Times,serif;
color: black;
text-align: justify;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<div class="post">
<div class="hideContent" style="height: 6em;">
<div class="post-text">
Lorem ipsum dolor sit amet,consectetur adipiscing elit. Aenean
semper,ligula quis gravida pretium,ligula arcu vestibulum mi,et
laoreet mauris ex at est. Donec pulvinar laoreet mollis. </div>
<div class="post-action">
<input type="button" value="Like" id="like_93" class="like">
<span class="likesTotal" id="likes_93">0</span>
</div>
</div>
<div class="showMore">Show more</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。