Text Fade Out con jQuery

JMiur

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>