Transición (CrossFader)

El "fade" es ese efecto de desvanecimiento entre la desaparición de un elemento y la aparición del siguiente.
Tengo este Java script en la cabecera, bajo el título, de Nada, desplegando dos series de párrafos y una imagen.
Pero para quien no quiera tener nada que ver con andar subiendo y bajando scripts (para empezar, yo... je), hay una forma más fácil, que he sacado de Evulon. Al final de esa página os trae una demostración. Y si queréis ver cómo he acomodado yo el crossfader, mirad en la sidebar central de BlogTest

Podéis insertar tanto texto como imágenes (como en mi ejemplo y el de la página que os pongo). Yo lo he insertado, como digo, en la sidebar, de la siguiente manera:

.- Primero un CSS, antes del cierre /skin:

<br /><!--div.cf_wrapper { position: relative;<br />div.cf_element {<br /><br /> width: 200px; background-color:#eee; border: 7px solid orange;div.cf_element div.content { padding: 5px;<br />div.cf_element div.content h3 { padding-top: 0; margin-top: 0;font-size:12px;color:orange;#wrapper { width: 200px; margin: 5px auto; text-align: left; clear: both;--><br />

.- Y, dinalmente, el java del fader, su contenido, cerrado en "divs", y un script que marca los tiempos de la transición:

<br /><h2>Ejemplo CrossFader</h2><p>Un javascript que produce el efecto "fade"</p><br /><div id="wrapper"><<div class="cf_wrapper"> <div id="cf1" class="cf_element"> <div class="content"> <h3>Elemento 1</h3> <p>El "Fade" es ese efecto de transición entre "aparacer" y desaparecer" de un objeto. </p> </div> </div> <div id="cf2" class="cf_element"> <div class="content"> <h3>Elemento 2</h3><br /> <p>Lo bueno d este Java es que puede usarse tanto con HTML como con imágenes, como vamos a ver a continuación (me refiero a las imágenes). Lo malo... es que es complicadito de insertar... <b>O no: pero a mí me ha costado...</b> </p> </div> </div> <div id="cf3" class="cf_element"> <div class="content"> <h3>Elemento 3</h3> <p style="text-align: center;"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPriQLUgbV9zBn_jiGElPWX2qZEoMAcsROq5TAUTDf6_COS9rhBOWAtgSPRC04mkMXGE998mr4SwhtEC38XpTnTLdOJwie_C1G-Mae67Y16weiDFFgwvHG7O3b6hdnTj4YlhIlhCB72Trl/s200/asterix0.gif"/> </p> </div> </div></div></div><script type="text/javascript"><!-- var cf = new Crossfader( new Array('cf1','cf2','cf3'), 500, 2000 );--></script><br />

Para variar, podéis cambiar, como he hecho yo, lo que os parezca bien en el CSS del Fade en cuestión...