jQuery text fade / transition de un texto a otro?

jQuery obviamente puede fadeIn / fadeOut texto fácilmente. Pero, ¿y si quieres cambiar el texto de una cosa a otra? ¿Puede pasar esto con una transición?

Ejemplo:

Hello

¿Se puede cambiar el texto Hello to World pero cambiarlo con una transición (como un fundido o algún efecto) en lugar de cambiar al instante?

Puede usar devoluciones de llamada, así:

 $("#container").fadeOut(function() { $(this).text("World").fadeIn(); }); 

Puede intentarlo aquí , o por cómo funciona la cola en este caso particular, así:

 $("#container").fadeOut(function() { $(this).text("World") }).fadeIn(); 

Esto ejecuta la llamada .text() cuando se completa .fadeOut() , justo antes de volver a .fadeOut() .

Si usa hide / show o fadeIn / fadeOut, puede encontrar algún efecto de “salto”, ya que cambia la propiedad de visualización de CSS. Sugeriría usar animate con opacidad.

Me gusta esto:

 $('#container').animate({'opacity': 0}, 1000, function () { $(this).text('new text'); }).animate({'opacity': 1}, 1000); 

Aquí hay un ejemplo en vivo .

 (function() { var quotes = $(".quotes"); var quoteIndex = -1; function showNextQuote() { ++quoteIndex; quotes.eq(quoteIndex % quotes.length) .fadeIn(2000) .delay(2000) .fadeOut(2000, showNextQuote); } showNextQuote(); })(); 

Funciona bien.

Una forma en que puedo pensar para hacer esto es tener elementos secundarios con texto y mostrar solo uno para comenzar, y luego fundir los otros en uno tras otro.

echa un vistazo aquí: http://jsfiddle.net/VU4CQ/

Usando búsquedas de matriz para texto y cambio de color, velocidad de transición y mouseenter, haga clic en Guardar eventos en este menú como este:

 $('#id a').mouseenter(function() { $(this).fadeOut( eSpeed, function() { $(this).text(sayThis[0]); $(this).css({ color: eColor }); }).fadeIn(eSpeed); }); $('#id a').mouseleave(function() { $(this).fadeOut( eSpeed, function() { $(this).text(sayThat[0]); $(this).css({ color: lColor }); }).fadeIn(eSpeed); }); 

Sugeriría que uses el plugin deslizante jQuery básico . Muy ligero (6k) y hace lo que quiere y tiene un par de opciones de personalización sin todo el desorden de la mayoría de los complementos de control deslizante. Lo uso todo el tiempo y es genial.