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.