jQuery text fade / transizione da un testo ad un altro?

jQuery può ovviamente dissolvere il testo in / fadeOut facilmente. Ma cosa succede se vuoi cambiare il testo da una cosa all’altra? Può succedere con una transizione?

Esempio:

Hello

Si può cambiare il testo Hello to World ma farlo cambiare con una transizione (come una dissolvenza o qualche effetto) invece di cambiare istantaneamente?

Puoi usare i callback, come questo:

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

Puoi fare un tentativo qui , o a causa di come funziona la coda in questo caso particolare, in questo modo :

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

Questo esegue la chiamata .text() quando il file .fadeOut() è completo, appena prima di dissolversi nuovamente.

Se usi hide / show o fadeIn / fadeOut potresti incontrare qualche effetto “saltellante”, perché cambia la proprietà di visualizzazione CSS. Suggerirei di usare animare con opacità.

Come questo:

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

Ecco un esempio dal vivo .

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

Funziona bene.

un modo in cui posso pensare di fare questo è di avere elementi figlio con testo e mostrarne solo uno per cominciare, poi svanire gli altri uno dopo l’altro.

dai un’occhiata qui: http://jsfiddle.net/VU4CQ/

Utilizzando le ricerche di array per il cambio di colore e testo, la velocità di transizione e gli eventi mouseenter, mouseleave su questo menu come questo:

 $('#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); }); 

Ti suggerirei di usare il plugin jQuery del cursore di base . Molto leggero (6k) e fa quello che vuoi e ha un paio di opzioni di personalizzazione senza la confusione di molti plug-in slider. Lo uso sempre ed è fantastico.