title: How to create a read more link with fade out background?
body: <p>I am following <a href="https://css-tricks.com/text-fade-read-more/" rel="nofollow noreferrer">this tutorial</a> and I tried to apply it to my case:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="jiku_text"&gt;
    &lt;p&gt;I was born in Mauritius in 1967, spending my childhood under the sun of the Indian Ocean, before moving to the UK in July 1976. Punk had just started its own cultural revolution, while reggae and dub were ever present in the neighbourhood “blues” parties, as well as from the first real booming systems in the cars that would ever so often drive casually through the streets of Lewisham, South-East London. I did all of my schooling there, drawing since as far back as I can remember, spending my youth deep into comics, sci-fi and fantasy literature, as well as role-playing games such as “Dungeons &amp;amp; Dragons”.&lt;/p&gt;
    &lt;p&gt;I can’t forget to mention what effect the release of Star Wars, in 1977, had on my vision of the world around me. Before even getting into J.R.R. Tolkien, this movie was definitely a milestone in my childhood, and stoked a fire for science-fiction and fantasy which would have me look at the world around me in a totally different way from before.&lt;/p&gt;
    &lt;p&gt;All these influences, as well as the music coming from the radio, the TV and the street, were reflected in what I drew or painted; from comic strip characters to lead figurines, even to the odd oil portrait or landscape painting.&lt;/p&gt;
    &lt;p&gt;After my school exams in summer ‘84, I started hanging out in Covent Garden, the hub of the London Hip Hop scene, which I had discovered the year before, walking through it with my mother and the younger of my older brothers. My drawing ability led me to pick up the marker and spray-can, doing anything from painting banners for the “Alternative Arts” centre, or customizing the trousers or jackets of some of the other people hanging out with me, whether they were dancers or Mc’s. I was soon trying to make a name for myself, along with my partner Scribla, then with Zaki Dee, Eskimo, and Xerox as The Trailblazers, and eventually as part of a crew called The Chrome , which I formed in the spring of 1985, around the time of a seminal gig called The Rapattack, at the Shaw Theatre in the Euston area of London.&lt;/p&gt;
    &lt;p class="read-more"&gt;&lt;a href="#" class="btn btn-danger"&gt;Read More&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.jiku_text {
    padding-top: 80px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 60px;
    background: #3a3a3a;
    margin-top: 40px;
    margin-bottom: 40px;
    margin-right: 20px;
    margin-left: 20px;
    color: #fff;
    max-height: 200px;
    position: relative;
    overflow: hidden;
  }
  
  .jiku_text .read-more { 
    position: absolute; 
    bottom: 0; 
    left: 0;
    width: 100%; 
    text-align: center; 
    margin: 0; padding: 30px 0; 
    background-image: linear-gradient(to bottom, transparent, black);
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var $el, $ps, $up, totalHeight;
  
  $(".jiku_text .btn").on("click", function() {
    totalHeight = 0
    $el = $(this);
    $p  = $el.parent();
    $up = $p.parent();
    $ps = $up.find("p:not('.read-more')");
    // measure how tall inside should be by adding together heights of all inside paragraphs (except read-more paragraph)
    $ps.each(function() {
      totalHeight += $(this).outerHeight();
    }); 
    $up
      .css({
      // Set height to prevent instant jumpdown when max height is removed
      "height": $up.height(),
      "max-height": 9999
    })
      .animate({
      "height": totalHeight
    });
    // fade out read-more
    $p.fadeOut();
    // prevent jump-down
    return false;
  });
  </code></pre>
  
  <p>But the expansion creates a jump, <a href="https://jsfiddle.net/fbh0o67o/332/" rel="nofollow noreferrer">see the test case on jsFiddle</a></p>
  
  <p><strong>UPDATE</strong> </p>
  
  <p>tried to provide <code>outerHeight</code> instead of <code>"height": $up.height(),</code> but the text isn't expanding in full see <a href="https://jsfiddle.net/fbh0o67o/351/" rel="nofollow noreferrer">https://jsfiddle.net/fbh0o67o/351/</a></p>