Text Fade Out con jQuery

Text Fade Out es una idea de CSS-Tricks que utiliza jQuery para crear un efecto de esfumado en textos, cortándolos a cierta altura y agregando un botón para expandirlos.

Obviamente, se requiere tener agregada la librería jQuery antes de </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'/>

Y luego, el script con el efecto que es muy corto:

<script type='text/javascript'>
//<![CDATA[
$(function() {
  var $el, $ps, $up, totalHeight;
  $(".textfadeout-demo .textfadeout-button").click(function() {
    totalHeight = 0
    $el = $(this);
    $p  = $el.parent();
    $up = $p.parent();
    $ps = $up.find("p:not('.textfadeout-more')");
    $ps.each(function() { totalHeight += $(this).outerHeight(); });
    $up.css({ "height": $up.height(), "max-height": 9999 })
    .animate({ "height": totalHeight });
    $p.fadeOut();
    return false;
  });
});
//]]>
</script>

Por último, el CSS que hace referencia a las clases definidas que pueden tener diferentes estilos y que con muy pocos agregados, deberían funcionar en cualquier navegador, incluyendo Internet Explorer:

<style>
.textfadeout-demo { /* es el rectángulo contenedor */
  background-color: #505961;
  color: #EEE;
  max-height: 150px; /* esto define la altura */
  overflow: hidden; /* y le decimos que "se corte" allí, ocultando el reesto */
  padding: 20px;
  position: relative;
  width: 300px;
}
.textfadeout-demo .textfadeout-more { /* el esfumado inferior */
  background-image: -moz-linear-gradient(top, transparent, #101921);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, transparent),color-stop(1, #101921));
  filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#00101921', EndColorStr='#FF101921')
  bottom: 0;
  left: 0;
  padding: 30px 0;
  position: absolute;
  text-align: center;
  width: 100%;
}
.textfadeout-button { /* el botón para expandir */
  border-top: 1px solid #96D1F8;
  background: #65A9D7;
  background: -moz-linear-gradient(top, #3E779D, #65A9D7);
  background: -webkit-gradient(linear, left top, left bottom, from(#3E779D), to(#65A9D7));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FF3E779D'; EndColorStr='#FF65A9D7');
  padding: 5px 10px;
  text-decoration: none;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
  -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
  box-shadow: rgba(0,0,0,1) 0 1px 0, rgba(0,0,0,90) 0 0 10px, rgba(0,0,0,90) 0 0 20px, rgba(0,0,0,90) 0 0 30px;
  text-shadow: rgba(0,0,0,.4) 0 1px 0;
}
.textfadeout-button:hover {
  border-top-color: #28597A;
  background: #28597A;
  color: #CCC;
}
.textfadeout-button:active {
  border-top-color: #1B435E;
  background: #1B435E;
}
</style>

Ya está; ahora podremos utilizar las tres clases definidas para crear el HTML:

<div class="textfadeout-demo">
<p> ....... el texto a mostrar ....... </p>
<p class="textfadeout-more"><a href="#" class="textfadeout-button">leer más</a></p>
</div>