jquery efecto desvanecimiento texto (fade in text, fade out texto)

En jQuery es fácil encontrar cualquier efecto de desvanecimiento - fade, fade in, fade out - pero casi todos estan orientados a hacer galerías de imagenes, me ha costado encontrar algo que funcione correctamente con solo texto. Esto es, un pase de diapositivas de información (no imagen).

Los ejemplos de utilización para imágenes no los voy a describir ya que son fáciles de encontrar y no me interesan en este momento, voy a explicar directamente como hacer el fade con textos:

jQuery
Usaremos el framework jQuery:
http://code.jquery.com/jquery-latest.pack.js

jQuery cycle
Complementamos jQuery con la extensión 'cycle':
http://jquery.malsup.com/cycle/

Código

JavaScript:
  1. $(function () {
  2. var $container = $('#informacion'),
  3.  
  4. quotes = [
  5. {fecha: '10 FEBRER 2010', titulo: 'Inauguració oficines SOC a Badalona'},
  6. {fecha: '05 MAIG 2010', titulo: 'Notícia nº1'},
  7. ];
  8.  
  9. $(quotes).each(function (i) {
  10. var quote = '<span>' + this.fecha + '</span> - <span>' + this.titulo + </span>';
  11. $container.append('
  12. <div>
  13.  
  14. ' + quote + '</div>
  15. ');
  16. });
  17. $container.cycle({
  18. speed: '2000',
  19. timeout: '10000',//1000=1seg
  20. cleartype: '1' // activar correcciones cleartype
  21. });
  22. });

Explicación

La variable container es el elemento que va a contener la información que queremos rotat. En mi caso:

Se crea el array 'quotes', que es el que contendrá la información que vamos a rotar, mi caso:

Posición N[fecha='',titulo='']

La manera en la que se mostrara se puede modificar en la linea:

var quote = '' + this.fecha + ' - ' + this.titulo + ';

En nuestro ejemplo pondra la fecha entre 'span' un guion separador y el titulo entre 'span' de nuevo.

Ejemplo

Podéis ver un ejemplo en funcionamiento en www.agparquitectes.com, en la sección de inicio, en el pie.

Etiquetas: , , ,

4 comentarios para “jquery efecto desvanecimiento texto (fade in text, fade out texto)”

  1. Luciano dice:

    Hola, muy bueno el código, pero por algún motivo en IE6 e IE7 cuando termina el ciclo de quotes muestra la palabra "UNDEFINED".
    Alguna idea de por qué puede suceder esto?
    Gracias !!!

  2. Luciano dice:

    Me contesto solo:
    Para que no tome un tercer elemento inexistente (en éste caso) hay que quitar la "," que se encuentra al final del ultimo quote, es decir, de ésto:

    {fecha: '05 MAIG 2010', titulo: 'Notícia nº1'},

    pasar a ésto

    {fecha: '05 MAIG 2010', titulo: 'Notícia nº1'}

    Saludos y espero que les sirva

  3. Abel dice:

    Muchas gracias por el código, llevaba días intentado hacer algo parecido y gracias a tu post he sabido hacerlo!!!

    Muchas gracias!!!!

  4. Ismael dice:

    Llevaba buscando el plugin para este efecto jquery desde hace dias, y por fin lo he encontrado. Mil gracias!!!!!!

Deja un comentario

CAPTCHA Image Audio Version
Reload Image