使用淡出

Question

尝试在网站上设置我的文本部分（HTML，CSS和最小的javascript），只显示一个段落的前几行，然后淡出一个选项以查看更多内容。单击更多按钮/文本时，该部分向下展开，显示整个文本。

这是一张图片，希望能够解释我想要做的事情。

感谢您的帮助！

Answer 1

$(function() {
    $('.open-close').each(function() {
        var item = $(this);
        var slide = item.find('.slide').css({
            'height': 100
        });
        var opener = item.find('.more');
        var isSlideOpen = false;
        var slideHeight = slide.find('.slide-content').innerHeight();
      
        opener.click(function(e) {
            e.preventDefault();
          
            if(isSlideOpen) {
                
                slide.stop(true).animate({
                    height: 100
                }, function() {
                    isSlideOpen = false;
                });
            } else {
                slide.stop(true).animate({
                    height: slideHeight
                }, function() {
                    isSlideOpen = true;
                });
            }
        });
    });
});

html {
  background: #000;
}
body {
  line-height: 20px;
  font-size: 14px;
  margin: 0;
  color: #fff;
}

.open-close {
  padding: 10px;
}

.link-holder {
  position: relative;
  text-align: right;
  padding: 10px 0 0;
  z-index: 10;
}

.link-holder:before {
  background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
  position: absolute;
  height: 80px;
  content: '';
  z-index: -1;
  bottom: 20px;
  right: 0;
  left: 0;
}

.slide {
  position: relative;
  overflow: hidden;
  z-index: 5;
}

.more {
  text-decoration: none;
  color: #cff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="open-close">
    <div class="slide">
      <div class="slide-content">
        <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
       </div>
    </div>
    <div class="link-holder">
        <a href="#" class="more">More</a>
    </div>
</div>