animación de paginas con jequry

hola

resulta que tengo tres div dentro de otro
el cual son paginas con contenido la primera eta activa mientras que las demas tienen display: none
en la parte inferior pienso por la hola

resulta que tengo 3 div con contenido adentro
quisiera ponerlos en una caja y que en ella la primera pagina este activa
y las demás tengan display: none

en la parte inferior pondría "1-2-3" que serian las paginas, y estas dirigirán al div correspondiente, el cual oculta la pagina activa y que la esta oculta cambie su propiedad css a block, que es lo facil,

lo tedioso es que quiero que al dar click al numero de la pagina se reproduzca
una animación que podría hacer con el evento .cssanimate

entonces por donde empiezo?
por favor no me recomienden librerias
la verdad quiero saber como se hace, no debe ser dificil cn numeros del 1 al 3

Lo mejor, para esos casos y va asonar extra;o es utilizar el mismo método de Tabs. Dado que ya las tienes renderizadas las DIVs, sin embargo quieres que algunas no se vean y cuando se clique se muestren. En el Html algo asi

Código HTML :

<div id="content">
   <div id="1">Contenido 1<div/>
   <div id="2">Contenido 2<div/>
   <div id="3">Contenido 3<div/>
</div>
<ul id="pags">
   <li  blind-id="1">1<li/>
   <li blind-id="2">2<li/>
   <li blind-id="3">3<li/>
<ul/>

En Javascipt seria asi

Código Javascript :

function VerPag ( id ){
  $( "#content div" ).hide();
  $( "#content > #" + id' ).show();
}
$("ul#pags > li").click(function(){
  VerPag( $(this).attr("blind-id") );
});
VerPag( "1" ); // Para que se vea la primera pagina :)

Seria algo asi...

Que tipo de animación deseas realizar?

HtrMancera escribió: