js实现内容超出一定高度后折叠 点击展开收起

内容超出200px部分隐藏，同时底部显示遮罩层、查看全文按钮。

点击显示全文，按钮变为“收起”。

相似效果可看csdn的博客内容页。

实现代码

<style>
.thread_article{position: relative;overflow: hidden;}
#gradient{width: 100%;height:50px;position: absolute;bottom: 0;left: 0;background: -moz-linear-gradient(bottom,rgba(255,255,255,.1),rgba(255,255,255,0));background: -webkit-gradient(linear,0 top,0 bottom,from(rgba(255,255,255,0)),to(#fff));background: -o-linear-gradient(bottom,rgba(255,255,255,.1),rgba(255,255,255,0));}
#read-more{padding: 5px;background: #fff;color: #333;}
#read-more a{padding-right: 22px;text-decoration: none;color:#0f88eb;}
#read-more a: hover{color: #000;}
.text-center{text-align:center;}
</style>

<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

<div class="thread_article">
-------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略---------------------------内容省略--------------
<div id="gradient"></div>
</div>
<div id="read-more" class="text-center"></div>
<script type="text/javascript">
$(function(){
var slideHeight = 200; // px
var defHeight = $('.thread_article').height();
if(defHeight >= slideHeight){  
  $('.thread_article').css('height' , slideHeight + 'px');
  $('#read-more').append('<a href="#">查看全文 <i class="fa fa-angle-down"></i></a>');
  $('#read-more a').click(function(){
   var curHeight = $('.thread_article').height();
   if(curHeight == slideHeight){
   $('.thread_article').animate({
     height: defHeight
    }, "normal");
    $('#read-more a').html('收起 <i class="fa fa-angle-up"></i>');
    $('#gradient').fadeOut();
   }else{
    $('.thread_article').animate({
     height: slideHeight
    }, "normal");
    $('#read-more a').html('查看全文 <i class="fa fa-angle-down"></i>');
    $('#gradient').fadeIn();
   }
   return false;
  });  
}
});
</script>