jQuery texte fondu / transition d’un texte à un autre?

jQuery peut évidemment fondre facilement sur / fadeOut text. Mais que faire si vous voulez changer le texte d’une chose à une autre? Est-ce que cela peut arriver avec une transition?

Exemple:

Hello

Peut-on changer le texte Hello to World mais est-ce que cela change avec une transition (comme un fondu ou un effet) au lieu de changer instantanément?

Vous pouvez utiliser des rappels, comme ceci:

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

Vous pouvez l’essayer ici ou à cause de la manière dont la queue fonctionne dans ce cas particulier, comme ceci :

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

Ceci exécute l’appel .text() lorsque le .fadeOut() est terminé, juste avant le retour en fondu.

Si vous utilisez hide / show ou fadeIn / fadeOut, vous pouvez rencontrer des effets “sautants”, car ils modifient la propriété d’affichage CSS. Je suggère d’utiliser animate avec l’opacité.

Comme ça:

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

Voici un exemple en direct .

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

Ça marche bien.

Une façon de penser à cela est d’avoir des éléments enfants avec du texte et d’en montrer un pour commencer, puis de faire disparaître les autres les uns après les autres.

jetez un oeil ici: http://jsfiddle.net/VU4CQ/

En utilisant les recherches de tableau pour le changement de texte et de couleur, la vitesse de transition et le paramètre mouseenter, sortez les événements de ce menu comme ceci:

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

Je vous suggère d’utiliser le plugin de base du curseur jQuery . Très léger (6k) et fait ce que vous voulez et a quelques options de personnalisation sans tout le désordre de la plupart des plugins slider. Je l’utilise tout le temps et c’est génial.