Flip con jQuery

No sé muy bien si puede ser útil pero, este plugin de jQuery es divertido. Se llama Flip y lo que hace es animar un DIV cualquiera, mostrando diferentes textos que pueden tener algún tipo de formato elemental.

Si descargamos el ZIP veremos los archivos necesarios que son tres. Uno de ellos es jQuery mismo que si ya tenemos insertado no hace falta agregarlo, el segundo es la librería genérica de efecto jquery-ui y ambos, podemos cargarlos desde Google Ajax API, agregando esto antes de </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js' type='text/javascript'/>

Luego de eso, el plugin en si mismo que viene en dos versiones, una normal (jquery.flip.js) y otra minimizada (jquery.flip.min.js); podemos usar cualquiera de ellas y alojarlas en un servidor externo o ponerlas directamente en la plantilla:

<script type='text/javascript'>
//<![CDATA[
  ... y aquí copiamos y pegamos el contenido del archivo JS ...
//]]>
</script>

Hacemos que funcione cargando el plugin con algo similar a esto:

<script type='text/javascript'>
//<![CDATA[
$(function(){
  $("#flipPad a").bind("click",function(){
    var $this = $(this);
    $("#flipbox").flip({
      direction: $this.attr("rel"),
      color: $this.attr("rev"),
      content: $this.attr("title"),
      onBefore: function(){$(".revert").show()}
    })
    return false;
  });
});
//]]>
</script>

donde #flipbox será el ID del DIV a animar y donde pueden modificarse o agregarse opciones:

content es el texto a mostrar que en el ejemplo, colocaremos en el atributo title
direction indica el tipo de animación (tb, bt, lr, rl) y l ocolocaremos en el atributo rel
color es el color de fondo que colocaremos en el atributo rev
speed define la velocidad

Ahora, nos falta el HTML que ponemos donde nos guste:

<div id="flipbox"> ... el texto a mostrar ... </div>

Y a continuación, por ejemplo, unos botones para que cambie el contenido:

<div id="flipPad">
  <a title=" el segundo texto " rev="#00BBCC" rel="rl" href="javascript:void(0);">left</a>
  <a title=" el tercer texto " rev="#AABB00" rel="bt" href="javascript:void(0);">top</a>
  <a title=" el cuarto texto " rev="#82BD2E" rel="tb" href="javascript:void(0);">bottom</a>
  <a title=" el quinto texto " rev="#C8D97E" rel="lr" href="javascript:void(0);">right</a>
</div>

Eventualmente, el contenido puede tener alguna clase de formato y para agregarlo, debemos cambiar los caracteres < y > de la etiqueta por sus equivalentes &lt; y &gt;, por ejemplo:

title=" el tercer texto con <strong>negrita</strong>"