Bloques animados en la sidebar

Hace ya un tiempo, Gem@ me envió un email, sugiriéndome que viera un efecto que habían implementado en la sidebar de una página web. Eran botones que se expandían y contraían pero al que se les había agregado un efecto de animación que hacía que esto se hiciera suavemente, pixel por pixel.

Después de tratar de entenderlo, me di por vencido porque estaba utilizando MooTools, una extensión escrita en Ajax y, por ahora, no era un tema en el cual quisiera involucrarme. Pero, el efecto era lindo ... una pena.

Buscando un poco, en Dynamic Drive encontré una página donde se mostraba un script llamado Animated Collapsible DIV que hacía más o menos lo mismo y cuya implementación es muy sencilla.

El script funciona tanto con DIVs que tengan el atributo CSS height definido como con aquellos que no lo tengan y "recuerda" qué DIVs están expandidos y cuáles están contraídos así que, al volver a la página, vuelve a mostrarlos tal como los dejamos.

Dentro del mismo archivo hay tres diferentes funciones que pueden usarse y todas ellas permiten establecer la duración del efecto para cada bloque. El tiempo se define en forma absoluta, quiere decir que, no depende del tamaño del bloque lo que hace muy agradable.

Para implementarlo, debemos descargar el archivo animatedcollapse.js y alojarlo en un servidor propio. Luego, insertamos el siguiente código en la plantilla de Blogger, justo antes de la etiqueta <:/HEAD>:

<script type="text/javascript" src="URL_animatedcollapse.js">
/***********************************************
* Animated Collapsible DIV- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>

El código para implementar un bloque expandible es el siguiente:

<a href="javascript:nombreVAR.slideit()" style=" [estilo del botón] "></a>
<div id="nombreID" style="width:100%;">
<div style=" [estilo del contenido] "> [contenido] </div>
</div>
<script type="text/javascript">
var nombreVAR=new animatedcollapse("nombreID", tiempo, estadoinicial)
</script>

Los nombres nombreVAR y nombreID deben ser únicos, si se colocan varios bloques expandibles, cada uno debe ser diferente.

El contenido de STYLE del DIV nombreID puede ser cualquier otro. Utilizando width:100% abarca el total de la sidebar pero podría utilizarse en cualquier otro lugar de una página web, por ejemplo:
style="width: 300px; height: 110px; background-color: #99E0FB;"

tiempo indica la duración del efecto y es un valor expresado en milisegundos (1000 = 1segundo)

estadoinicial puede ser true o false e indica el estado inicial del bloque. Si es true, estará expandido y si es false, estará contraido.

Hay dos limitaciones a tener en cuenta. Si no establecemos la propiedad height, deberemos esperar a que se cargue la página, si hacemos click antes, aparecerá una ventana de advertencia:

La segunda no es tanto una limitación del script como del mismo Blogger. El tiempo a indicar deberá ser probado y fijarlo en el menor valor posible. En los ejemplos, hay valores de 10, 100, 500 y 700, pero, dependiendo de la hora y el momento, el efecto, a veces tiende a ser más lento de lo esperable.

Si bien todos los ejemplos anteriores se basan en la función slideit() que permuta los estados expandido/contraido del DIV, hay otras dos en el mismo script que pueden utilizarse de manera similar: slidedown() expande el bloque y slideup() contraer el bloque.

<a href="javascript:nombreVAR.slidedown()">EXPANDIR</a> |
<a href="javascript:nombreVAR.slideup()">CONTRAER</a>
<div id="nombreID" style="width: 300px; height: 100px; background-color: #99E0FB;">
<div style="color: #000000; text-align: center;"> [contenido] </div>
</div>
<script type="text/javascript">
var nombreVAR=new animatedcollapse("nombreID", tiempo, estadoinicial, "block")
</script>